单页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

实现效果:

 具体用法如下:

一、首先页面引用

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值