来源:未知 时间:2021-12-21 13:38 作者:小飞侠 阅读:次
[导读] Vue-Lazyload Vue module for lazyloading images in your applications. Some of goals of this project worth noting include: Be lightweight, powerful and easy to use Work on any image type Add loading class while image is loading Supports both...
Vue-LazyloadVue module for lazyloading images in your applications. Some of goals of this project worth noting include:
Table of ContentsDemoRequirements
Installationnpm$ npm i vue-lazyload -S CDNCDN: https://unpkg.com/vue-lazyload/vue-lazyload.js <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script><script> Vue.use(VueLazyload) ...</script> Usagemain.js: import Vue from 'vue'import App from './App.vue'import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)// or with optionsVue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1})new Vue({ el: 'body', components: { App }}) template: <ul> <li v-for="img in list"> <img v-lazy="img.src" > </li></ul> use <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 <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> Constructor Options
Desired Listen EventsYou can configure which events you want vue-lazyload by passing in an array Vue.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' ]}) This is useful if you are having trouble with this plugin resetting itself to loading Image listener filterdynamically modify the src of 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' } } }}) Element AdapterVue.use(vueLazy, { adapter: { loaded ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error, Init }) { // do something here // example for call LoadedHandler LoadedHandler(el) }, loading (listender, Init) { console.log('loading') }, error (listender, Init) { console.log('error') } }}) IntersectionObserveruse Intersection Observer to to improve performance of a large number of nodes. Vue.use(vueLazy, { // set observer to true observer: true, // optional observerOptions: { rootMargin: '0px', threshold: 0.1 }}) Lazy ComponentVue.use(VueLazyload, { lazyComponent: true}); <lazy-component @show="handler"> <img class="mini-cover" :src="img.src" width="100%" height="400"></lazy-component><script> { ... methods: { handler (component) { console.log('this component is showing') } } }</script> ImplementationBasicvue-lazyload will set this img element's <script>export default { data () { return { imgObj: { src: 'http://xx.com/logo.png', error: 'http://xx.com/error.png', loading: 'http://xx.com/loading-spin.svg' }, imgUrl: 'http://xx.com/logo.png' // String } }}</script><template> <div ref="container"> <img v-lazy="imgUrl"/> <div v-lazy:background-image="imgUrl"></div> <!-- with customer error and loading --> <img v-lazy="imgObj"/> <div v-lazy:background-image="imgObj"></div> <!-- Customer scrollable element --> <img v-lazy.container ="imgUrl"/> <div v-lazy:background-image.container="img"></div> <!-- srcset --> <img v-lazy="'img.400px.jpg'" data-srcset="img.400px.jpg 400w, img.800px.jpg 800w, img.1200px.jpg 1200w"> <img v-lazy="imgUrl" :data-srcset="imgUrl' + '?size=400 400w, ' + imgUrl + ' ?size=800 800w, ' + imgUrl +'/1200.jpg 1200w'" /> </div></template> CSS stateThere are three states while img loading
<img src="imgUrl" lazy="loading"><img src="imgUrl" lazy="loaded"><img src="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> MethodsEvent Hook
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com