vue-lazyload加载图片第二屏一直显示默认图片_v-lazyload加载失败显示默认图片-CSDN博客

本文链接：https://blog.csdn.net/weixin_45115895/article/details/105810249

本文描述了在使用Vue-Lazyload进行图片懒加载时遇到的问题：第二屏图片始终显示默认图。通过调整listenEvents参数，增加'touchmove'事件监听，解决了移动端懒加载不触发的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-lazyload加载图片第二屏一直显示默认图片

最近的一个项目有用到图片懒加载,遇到一个问题困扰了我好几天,最后找到原因,顿时觉得自己好蠢
问题描述:进入页面首屏自动加载后,往上拉时并没有继续渲染图片,一直显示默认图片,给我纳闷好久
在这里插入图片描述
昨天在又一次探究无果的情况下本来打算另辟蹊径,投机取巧,强制刷新页面的时候发现懒加载效果在鼠标滚轮滚动的情形下是可以实现正常的懒加载的效果的,这样的话绝对是我哪里的设置有问题,后来又查了一下,在main.js引入vueLazyload时配置有问题

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  preLoad: 1.5,
  error: '../static/images/icon/goods-loading.png',       // 加载失败默认图片
  loading: '../static/images/icon/goods-loading.png',     // 加载中默认图片
  attempt: 1,
  // listenEvents: ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
  listenEvents:['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'webkitAnimationend', 'webkitTransitionend', 'touchmove']
})