Vue-Lazyload懒加载

注：此文档中的配置实例中文文档为机翻和根据自我理解进行的翻译
可能如原文有出入，若想理解原意请看英语文档

原官方文档地址：https://www.npmjs.com/package/vue-lazyload

1、安装

npm i vue-lazyload -S

2、使用

2.1、main.js导入并配置


import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload, {preLoad: 1.3,error: 'dist/error.png',       //img的加载中的显示的图片的路径loading: 'dist/loading.gif',    //img加载失败时现实的图片的路径attempt: 1,                   //尝试加载的次数listenEvents['scroll','wheel','mousewheel','resize','animationend','    transitionend','touchmove'],  //你想让vue监听的事件
})new Vue({el: 'app',components: {App}
})

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

use v-lazy-container work with raw HTML

使用v-lazy-container与原始的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 loading placeholder image

自定义error和loading占位符图像

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

3、配置选项

属性	描述	默认值	选项
preLoad	预载高度比例	1.3	Number
error	img的加载失败显示的图片的路径	‘data-src’	String
loading	img的加载中的显示的图片的路径	‘data-src’	String
attempt	尝试次数	3	Number
listenEvents	您想要Vue监听的事件	[‘scroll’, ‘wheel’, ‘mousewheel’, ‘resize’, ‘animationend’, ‘transitionend’, ‘touchmove’]	监听的事件（Desired Listen Events）
adapter	动态修改element的属性	{}	属性对象（Element Adapter）
filter	图像的侦听器过滤器	{}	图像侦听器/过滤器（Image listener filter）
lazyComponent	延迟加载组件	false	懒加载组件（Lazy Component）
dispatchEvent	触发dom事件	false	Boolean
throttleWait		200	Number
observer	使用IntersectionObserver	false	Boolean
observerOptions	IntersectionObserver选项	{ rootMargin: ‘0px’, threshold: 0.1 }	交叉观察者（IntersectionObserver）
silent	不打印调试信息	true	Boolean

4、具体配置示例

4.1、listenEvents

You can configure which events you want vue-lazyload by passing in an array of listener names.

您可以通过传入侦听器名称数组来配置需要vue-lazyload的事件。

Vue.use(VueLazyload, {preLoad: 1.3,error: 'dist/error.png',loading: 'dist/loading.gif',attempt: 1,//默认值为 ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']listenEvents: [ 'scroll' ]
})

This is useful if you are having trouble with this plugin resetting itself to loading when you have certain animations and transitions taking place

如果您在发生某些动画和转换时，在此插件重置为加载时遇到问题，这是很有用的

4.2、 filter

dynamically modify the src of image
动态修改图像的src

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) returnconst isCDN = /qiniudn.com/if (isCDN.test(listener.src)) {listener.src += '?imageView2/2/format/webp'}}}
})

4.3、adapter

动态修改element的属性

Vue.use(vueLazy, {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')}}
})

4.4、observer与observerOptions

use Intersection Observer to to improve performance of a large number of nodes.

Vue.use(vueLazy, {// set observer to trueobserver: true,// optionalobserverOptions: {rootMargin: '0px',threshold: 0.1}
})

4.5、 lazyComponent

组件懒加载

//main.js
Vue.use(VueLazyload, {lazyComponent: true
});//template
<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>

4.6、设置图片src

vue-lazyload will set this img element’s src with imgUrl string

vue-lazyload会通过imgUrl 字符串对img的src进行设置

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

4.7、设置CSS状态

There are three states while img loading v

img 加载时的三种状态

loading loaded error

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

5、方法

vm.$Lazyload.$on(event, callback)

vm.$Lazyload.$off(event, callback)

vm.$Lazyload.$once(event, callback)

$on听一个自定义事件loading，loaded，error
$once收听自定义事件，但仅一次。首次触发时，监听器将被删除。
$off 删除事件侦听器。

5.1、$on

vm.$Lazyload.$on

参数

{string} event
{Function} callback

示例

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

5.2、$once

vm.$Lazyload.$once

参数

{string} event
{Function} callback

示例

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

5.3、$off

vm.$Lazyload.$off

If only the event is provided, remove all listeners for that event

如果只提供事件，则删除该事件的所有侦听器

参数

{string} event
{Function} callback

示例

function handler ({ el, src }, formCache) {console.log(el, src)
}
vm.$Lazyload.$on('loaded', handler)
vm.$Lazyload.$off('loaded', handler)
vm.$Lazyload.$off('loaded')

5.4、延迟加载处理程序

vm.$Lazyload.lazyLoadHandler

Manually trigger lazy loading position calculation

手动触发延迟加载位置计算

示例

this.$Lazyload.lazyLoadHandler()

控制台输出

this.$Lazyload.$on('loaded', function (listener) {console.table(this.$Lazyload.performance())
})

5.5、动态切换图片

 <img v-lazy =“ lazyImg”：key =“ lazyImg.src”>

Vue-Lazyload学习文档相关推荐

2w多字总结的VUE学习文档
VUE学习文档文章目录 VUE学习文档回顾: 总结 0 目标 1.前言 2.认识Vue 3.快速入门 3.1.创建工程 3.2.安装vue 3.2.1.下载安装 3.2.2.使用CDN 3.3.v ...
IntelliJ IDEA 14,15 使用教程，实战总结，倾囊相授，内附PDF学习文档
转载博文,尊重原创,感谢前辈分享,原文地址:"请叫我大师兄__"的CSDN博客主页文章目录前言一.安装二.使用 1.Debug 2.修改内存 3.一般设置 4.高级设置 5 ...
FreeMarker中文帮助手册API文档,基础入门学习文档
FreeMarker中文帮助手册API文档,基础入门学习文档分类: 编程技术发布: bywei 浏览: 7 日期: 2011年5月28日分享到: QQ空间新浪微博腾讯微博人人网什么是Fr ...
ffmpeg的中文学习文档
ffmpeg的中文学习文档文章目录: 一.ffmpeg介绍二.学习参考文档 1.中文一.ffmpeg介绍 ffmpeg是视频处理工具,可选参数非常多,功能也非常的强大,可以用来开发各种视频处理工 ...
Ext JS 6学习文档-第3章-基础组件
Ext JS 6学习文档-第3章-基础组件基础组件在本章中,你将学习到一些 Ext JS 基础组件的使用.同时我们会结合所学创建一个小项目.这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮, ...
Ext JS 6学习文档-第6章-高级组件
Ext JS 6学习文档-第6章-高级组件高级组件本章涵盖了高级组件,比如 tree 和 data view.它将为读者呈现一个示例项目为图片浏览器,它使用 tree 和 data view 组 ...
NodeJS-001-Nodejs学习文档整理(转-出自http://www.cnblogs.com/xucheng)
Nodejs学习文档整理 http://www.cnblogs.com/xucheng/p/3988835.html 1.nodejs是什么: nodejs是一个是javascript能在后台运行的平 ...
java学习文档_阿里技术专家带你玩转JVM,从底层源码到项目实战，都在这份文档里...
作为 Java 的从业者,在找工作的时候,一定会被问及关于 JVM 相关的知识. JVM 知识的掌握程度,在很多面试官眼里是候选人技术深度的一个重要评判标准.而大多数人可能没有对 JVM 的实际开发和 ...
vue 导出word文档（包括图片）
vue 导出word文档(包括图片) 1.打开终端,安装依赖 -- 安装 docxtemplater npm install docxtemplater pizzip --save-- 安装 jszi ...
[扩展阅读] EasyGUI 学习文档【超详细中文版】
[扩展阅读] EasyGUI 学习文档[超详细中文版] 0. 安装 EasyGUI 官网:https://github.com/robertlugg/easygui python查看内置的所有模块 h ...

Vue-Lazyload学习文档