A Vue.js Plugin for Lazyloading Your Image or Component

Vue-Lazyload is a lightweight and easy-to-use Vue 1.x/2.x module for lazy loading images in your apps.

vue lazy load component scroll, vue lazy load component, lazy loading javascript on scroll, lazy load images example, loadinglazy background image, lazy load images jquery

Some of this project’s noteworthy goals include:

• BE LIGHTWEIGHT, STRONG, AND EASY TO USE
• Work on any type of photo
• Add loading category while loading image
• Supports both Vue 1.0 and Vue 2.0

How to make use of it:

Install and download:

$ npm install vue-lazyload --save

Using v-lazy-container work with raw HTML.

<div v-lazy-container="{ selector: 'img' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

Custom error and placeholder image for upload.

<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

<div v-lazy-container="{ selector: 'img' }">
  <img data-src="//domain.com/img1.jpg" data-error="xxx.jpg">
  <img data-src="//domain.com/img2.jpg" data-loading="xxx.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

src dynamically modifying the image.

Vue.use(vueLazy, {
    filter: {
      progressive (listener, options) {
          const isCDN = /qiniudn.com/
          if (isCDN.test(listener.src)) {
              listener.el.setAttribute('lazy-progressive', 'true')
              listener.loading = listener.src + '?imageView2/1/w/10/h/10'
          }
      },
      webp (listener, options) {
          if (!options.supportWebp) return
          const isCDN = /qiniudn.com/
          if (isCDN.test(listener.src)) {
              listener.src += '?imageView2/2/format/webp'
          }
      }
    }
})

Constructor Options

Module For Lazyloading Images, Vue-Lazyload Plugin/Github, html lazy load images, vuejs 3 lazy load image

See Demo And Download

Official Website(hilongjw): Click Here

This superior jQuery/javascript plugin is developed by hilongjw. For extra Advanced Usages, please go to the official website.