A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/bartdominiak/vue-lazy below:

bartdominiak/vue-lazy: 🔥 Lightweight Image/Picture lazyload based on Intersection API

Lightweight Image/Picture lazyload based on Intersection API.

Please note that this lib is on very early stage.

Will be added soon

  yarn add vue-lazy // or npm install vue-lazy
import Vue from 'vue'
import VueLazy from 'vue-lazy'
import 'vue-lazy/dist/vue-lazy.css'

Vue.use(VueLazy)
import { LazyImage } from 'vue-lazy'
import 'vue-lazy/dist/vue-lazy.css'

export default {
  components: { LazyImage }
}

If you want to see live examples, please jump to Storybook page.

<lazy-image
  src="https://via.placeholder.com/250"
  alt="example aternative text"
/>
Image with known width (prevent jumping content on page)
<lazy-image
  src="https://via.placeholder.com/250"
  alt="example aternative text"
  width="250"
  height="250"
/>
<lazy-image
  src="https://via.placeholder.com/250"
  alt="example aternative text"
  tag="picture"
>
  <source media="(min-width:1366px)" srcset="https://via.placeholder.com/1360x300">
  <source media="(min-width:1024px)" srcset="https://via.placeholder.com/1024x300">
</lazy-image>

Install necessary depandancies with yarn or npm

Run Storybook for development mode

Release

If you have a feature request then feel free to start a new issue, or just grab existing one.

MIT


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4