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:

  • 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">  

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 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">  

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

preLoadproportion of pre-loading height1.3Number
errorsrc of the image upon load fail'data-src'String
loadingsrc of the image while loading'data-src'String
attemptattempts count3Number
listenEventsevents that you want vue listen for['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']Desired Listen Events
adapterdynamically modify the attribute of element{ }Element Adapter
filterthe image’s listener filter{ }Image listener filter
lazyComponentlazyload componentfalseLazy Component
dispatchEventtrigger the dom eventfalseBoolean
throttleWaitthrottle wait200Number
observeruse IntersectionObserverfalseBoolean
observerOptionsIntersectionObserver options{ rootMargin: ‘0px’, threshold: 0.1 }IntersectionObserver
silentdo not print debug infotrueBoolean

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.

Leave a Comment