vue img src 动态赋值_一个基于Vue的开源延迟加载插件——vuelazyload
介绍vue-lazyload是一个基于Vue的延迟加载插件,用于延迟加载Vue组件或者图像。Githubhttps://github.com/hilongjw/vue-lazyload特点轻便,功能强大且易于使用处理任何图像类型加载图像时添加加载类同时支持Vue 1.0和Vue 2.0快速开始npm i vue-lazyload -S<script src="https://unp...
·
介绍
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 src="//domain.com/img1.jpg">
<img src="//domain.com/img2.jpg">
<img src="//domain.com/img3.jpg">
div>
自定义错误和加载占位符图像
<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
<img src="//domain.com/img1.jpg">
<img src="//domain.com/img2.jpg">
<img 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非常适合用在图片加在较多的网页上,效果优雅!
图片和内容源自网络分享,若有侵权,请联系删除!
上海艾磊科技有限公司专门为企业提供IT咨询,IT外包,系统集成,以及各类IT增值服务。其中增值服务包括OFFICE 365云服务,鼎捷企业ERP管理软件,云备份,企业邮箱,无线覆盖,上网行为管理,VPN架设,网络安全服务,INTERNET接入,设备租赁, IP电话服务
更多推荐
已为社区贡献2条内容
所有评论(0)