Table of Contents

Requirements

Installation

npm

$ npm i @jambonn/vue-lazyload

yarn

$ yarn add @jambonn/vue-lazyload

CDN

<scriptsrc="https://unpkg.com/@jambonn/vue-lazyload/dist/vue-lazyload.umd.js"></script><script>varAttributeBindingApp={data(){return{message:'Vue Lazyload'}}}varapp=Vue.createApp(AttributeBindingApp)app.use(window['vue-lazyload'].default)app.mount('#bind-attribute')...</script>

Usage

import{createApp}from'vue'importVueLazyloadfrom'@jambonn/vue-lazyload'importAppfrom'./App.vue'constapp=createApp(App)app.use(VueLazyload)// or with optionsconstloadimage=require('./assets/loading.gif')consterrorimage=require('./assets/error.gif')app.use(VueLazyload,{preLoad:1.3,error:errorimage,loading:loadimage,attempt:1})app.mount('#app')

<ul><liv-for="img in list"><imgv-lazy="img.src"></li></ul>

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

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

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

Constructor Options

Desired Listen Events

constapp=createApp(AttributeBindingApp)app.use(VueLazyload,{preLoad:1.3,error:'dist/error.png',loading:'dist/loading.gif',attempt:1,// the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']listenEvents:['scroll']})

Image listener filter

constapp=createApp(AttributeBindingApp)app.use(VueLazyload,{filter:{progressive(listener,options){constisCDN=/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)returnconstisCDN=/qiniudn.com/if(isCDN.test(listener.src)){listener.src+='?imageView2/2/format/webp'}}}})

Element Adapter

constapp=createApp(AttributeBindingApp)app.use(VueLazyload,{adapter:{loaded({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error, Init}){// do something here// example for call LoadedHandlerLoadedHandler(el)},loading(listender,Init){console.log('loading')},error(listender,Init){console.log('error')}}})

IntersectionObserver

constapp=createApp(AttributeBindingApp)app.use(vueLazy,{// set observer to trueobserver:true,// optionalobserverOptions:{rootMargin:'0px',threshold:0.1}})

Lazy Component

constapp=createApp(AttributeBindingApp)app.use(VueLazyload,{lazyComponent:true});

<lazy-component@show="handler"><imgclass="mini-cover":src="img.src"width="100%"height="400"></lazy-component><script>exportdefault{setup(){consthandler=()=>{console.log('this component is showing')}return{ handler}}}</script>

<lazy-componentv-for="(item, index) in list":key="item.src"><imgclass="mini-cover":src="item.src"width="100%"height="400"></lazy-component>

Implementation

Basic

<template><div"><imgv-lazy="imgUrl"/><divv-lazy:background-image="imgUrl"></div><!-- with customer error and loading --><imgv-lazy="imgObj"/><divv-lazy:background-image="imgObj"></div><!-- Customer scrollable element --><imgv-lazy.container ="imgUrl"/><divv-lazy:background-image.container="img"></div><!-- srcset --><imgv-lazy="'img.400px.jpg'"data-srcset="img.400px.jpg 400w, img.800px.jpg 800w, img.1200px.jpg 1200w"><imgv-lazy="imgUrl":data-srcset="imgUrl' + '?size=400 400w, ' + imgUrl + ' ?size=800 800w, ' + imgUrl +'/1200.jpg 1200w'"/></div></template><script>import{ref,reactive}from'vue'exportdefault{setup(){constimgObj=reactive({src:'http://xx.com/logo.png',error:'http://xx.com/error.png',loading:'http://xx.com/loading-spin.svg'})constimgUrl=ref('http://xx.com/logo.png')// Stringreturn{ imgObj, imgUrl}}}</script>

CSS state

<imgsrc="imgUrl"lazy="loading"><imgsrc="imgUrl"lazy="loaded"><imgsrc="imgUrl"lazy="error">

<style>img[lazy=loading] {/*your style here*/  }img[lazy=error] {/*your style here*/  }img[lazy=loaded] {/*your style here*/  }/*  or background-image  */  .yourclass[lazy=loading] {/*your style here*/  }  .yourclass[lazy=error] {/*your style here*/  }  .yourclass[lazy=loaded] {/*your style here*/  }</style>

Methods

Event Hook

import{getCurrentInstance,inject}from'vue'exportdefault{setup(){constinternalInstance=getCurrentInstance().appContext.config.globalPropertiesconstLazyLoad=internalInstance.$Lazyload// orconstLazyload=inject('Lazyload')Lazyload.$on(event,callback)Lazyload.$off(event,callback)Lazyload.$once(event,callback)}}

Lazyload.$on

Arguments:

Example

Lazyload.$on('loaded',function({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error},formCache){console.log(el,src)})

Lazyload.$once

Arguments:

Example

Lazyload.$once('loaded',function({ el, src}){console.log(el,src)})

Lazyload.$off

Arguments:

Example

import{getCurrentInstance,inject}from'vue'exportdefault{setup(){constinternalInstance=getCurrentInstance().appContext.config.globalPropertiesconstLazyLoad=internalInstance.$Lazyload// orconstLazyload=inject('Lazyload')consthandler=({ el, src},formCache)=>{console.log(el,src)}Lazyload.$on('loaded',handler)Lazyload.$off('loaded',handler)Lazyload.$off('loaded')}}

LazyLoadHandler

Example

import{getCurrentInstance,inject}from'vue'exportdefault{setup(){constinternalInstance=getCurrentInstance().appContext.config.globalPropertiesconstLazyLoad=internalInstance.$Lazyload// orconstLazyload=inject('Lazyload')Lazyload.lazyLoadHandler()}}

Performance

import{getCurrentInstance,inject}from'vue'exportdefault{setup(){constinternalInstance=getCurrentInstance().appContext.config.globalPropertiesconstLazyLoad=internalInstance.$Lazyload// orconstLazyload=inject('Lazyload')Lazyload.$on('loaded',function(listener){console.table(Lazyload.performance())})}}

Dynamic switching pictures

 <imgv-lazy="lazyImg" :key="lazyImg.src">

Authors && Contributors

License