单页vue 列表图片懒加载 vue-lazyload 、html5

在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

为了只看懒加载，把分页部分省略了，只看第一页

单页分页实例指路：关于vue分页加载、通过监听滚动条方式分页，单页vue_闲来无事垂钓的博客-CSDN博客_vue3滚动分页单页vue2、vue3监听滚动条实现分页加载下一页https://blog.csdn.net/qq_39109182/article/details/127425352?spm=1001.2014.3001.5501

<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版本匹配不上