介绍
vue-lazyload是一个基于Vue的延迟加载插件,用于延迟加载Vue组件或者图像。
Github
https://github.com/hilongjw/vue-lazyload
特点
- 轻便,功能强大且易于使用
- 处理任何图像类型
- 加载图像时添加加载类
- 同时支持Vue 1.0和Vue 2.0
快速开始
npm i vue-lazyload -S
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js">script>
<script>
Vue.use(VueLazyload)
...
script>
使用
- main.js
import Vue from \'vue\'
import App from \'./App.vue\'
import VueLazyload from \'vue-lazyload\'
Vue.use(VueLazyload)
// or with options
Vue.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>
- 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>
- 自定义错误和加载占位符图像
<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>
“{ selector: \’img\’ }”> data-src=“//domain.com/img1.jpg” data-error=“xxx.jpg”> data-src=“//domain.com/img2.jpg” data-loading=“xxx.jpg”> data-src=“//domain.com/img3.jpg”>
- 配置
总结
具体详细的使用参考Github上的文档,vue-lazyload非常适合用在图片加在较多的网页上,效果优雅!
内容出处:,
声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/share/12886.html