在vue.js与h5中,列表的图片使用懒加载 vue-lazyload
vue-lazyload文档:vue-lazyload - npm
关于vue-lazyload一些配置参数:
key | 描述 | 默认值 | 类型 |
---|---|---|---|
preLoad | 预加载高度比例 | 1.3 | Number |
error | 图片加载失败后要显示的失败图片路径 | 'data-src' | String |
loading | 加载中的图片路径 | 'data-src' | String |
attempt | 图片加载失败后再次尝试加载次数 | 3 | Number |
listenEvents | 触发懒加载事件(例如是放在滚动条里,还是改变页面大小的时候,如果不想在很多事件里监听,可以指定想要的比如设置['touchmove'],这时触发滚动条也不会执行它,只有touchmove屏幕才会加载图片) | ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] | Desired Listen Events |
adapter | 动态修改元素属(loading,loaded,error 三个的回调函数) | { } | Element Adapter |
filter | 图像的监听器过滤器(可以在加载图片前对src进行修改) | { } | Image listener filter |
lazyComponent | lazyload 组件 | 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 |
实现效果:
具体用法如下:
一、首先页面引用
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-lazyload@1.2.6/vue-lazyload.js"></script>
二、页面部分
这里主要列了图片部分 ,其他部分和css部分都省略了,
<img v-lazy='item.imgurl'> 主要就是v-lazy
<div class="box-item" v-for="(item,index) in listData" :key="index">
<div class="item-img">
<!-- <img :src='item.imgurl==null || item.imgurl=="" ? "images/img404.png" : item.imgurl' :onerror="defaultImg"> -->
<img v-lazy='item.imgurl'>
</div>
<div class="item-tit">{{item.title}}</div>
</div>
也可单独设置loading样式,视情况而定
img[lazy="loading"]{
//loading的样式
}
三、设置js
为了只看懒加载,把分页部分省略了,只看第一页
<script>
Vue.use(VueLazyload, {
preLoad: 1.3,
error:'images/img404.png',//加载失败时展示的图片
attempt: 1,//加载失败后重新加载一次
loading:'images/imgload.png',//加载过程中展示的图片
})
new Vue({
el:'#app',
data:{
defaultImg:'this.src="images/img404.png"',//图片404
listData:[],//列表数据
},
mounted() {
this.getListData()//列表
},
methods:{
//数据列表
getListData(postData){
axios.post(接口地址,请求接口的参数)
.then((res) => {
// console.log('返回列表数据',res)
if(res.status == 200){
this.listData=res.data.data.list //分页部分省略了,这里只取第一页数据spm=1001.2014.3001.5501
}else{
console.log('200以外',res)
}
}).catch(err => {
console.log('err',err)
})
},
},
})
如果过程遇到Failed to resolve directive:lazy 可能是vue.js 和 vue-lazyload.js版本匹配不上