• 单页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图片加载失败后再次尝试加载次数3Number
    listenEvents触发懒加载事件（例如是放在滚动条里，还是改变页面大小的时候，如果不想在很多事件里监听，可以指定想要的比如设置['touchmove']，这时触发滚动条也不会执行它，只有touchmove屏幕才会加载图片）['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']Desired Listen Events
    adapter动态修改元素属（loading,loaded,error
    三个的回调函数）    		{ }Element Adapter
    filter图像的监听器过滤器（可以在加载图片前对src进行修改）{ }Image listener filter
    lazyComponentlazyload 组件falseLazy Component
    dispatchEvent触发DOM事件falseBoolean
    throttleWait等待时长200Number
    observer是否使用IntersectionObserverfalseBoolean
    observerOptionsIntersectionObserver选项

    {

       rootMargin: '0px',         threshold: 0.1

    }

    		IntersectionObserver
    silent不打印调试信息trueBoolean

    实现效果：

     具体用法如下：

    一、首先页面引用

    2. <script src="https://unpkg.com/vue-lazyload@1.2.6/vue-lazyload.js">script>

    二、页面部分

    这里主要列了图片部分 ，其他部分和css部分都省略了，

      主要就是v-lazy

    1. <div class="box-item" v-for="(item,index) in listData" :key="index">
    2.     <div class="item-img">
    3.         
    4.         <img v-lazy='item.imgurl'>
    5.     div>
    6.     <div class="item-tit">{{item.title}}div>
    7. div>

    也可单独设置loading样式，视情况而定

    1. img[lazy="loading"]{
    2.   //loading的样式
    3. }

    三、设置js

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

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

    1.