一个基于Vue的开源延迟加载插件——vue-lazyload
介绍
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><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>- 配置
总结
具体详细的使用参考Github上的文档，vue-lazyload非常适合用在图片加在较多的网页上，效果优雅！