vue中实现图片的懒加载 快速上手

在项目当中追求快速开发 这里我们直接使用现成的插件

第一步：安装插件

npm i vue-lazyload --s

第二步：在main.js文件中全局注册

import VueLazyload from 'vue-lazyload'
//直接使用的情况 不添加配置项使用默认配置
// Vue.use(VueLazyload) 
//使用自定义配置
Vue.use(VueLazyload, {
  preLoad: 1.3, //图片预加载的宽高比
  loading: require("xxxx.png"), //图片处于加载中显示的图片
  error: require("xxxx.png"), //图片加载失败显示的图片
  attempt: 1, // 加载错误后最大尝试次数
})

最后步：在需要的页面使用

  <div>
    <ul>
      <li v-for="item in imgList">
        <img v-lazy="item.src" :key=item.src>
      </li>
    </ul>
  </div>

最关键的就是 将 img标签的 src属性 替换为 v-lazy 就可以实现图片懒加载效果了

下面是vue-lazyload的详细配置项：参考vue-lazyload官方文档 vue-lazyload: A Vue.js plugin for lazyload your Image or Component in your application.

键	描述	默认值	选项
preLoad	表示lazyload的元素, 距离页面底部距离的百分比. 计算值为(preload - 1)	1.3	Number
error	加载失败后图片地址	'data-src'	String
loading	加载时图片地址	'data-src'	String
attempt	图片加载失败后的重试次数	3	Number
listenEvents	触发懒加载的事件	['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']
adapter	注册img 的loading,loaded,error 三个状态的回调函数, 参数会暴露懒加载的img元素, 可以对其进行操作.	{ }
filter	img未加载之前, 解析到src 的时候注册的回调函数. 可以在加载图片之前,对src进行修改. 注册在filter下的所有的函数都会执行	{ }
lazyComponent	是否启用懒加载组件. <lazy-component>组件中的内容 只有在出现在preload的 位置中才会加载组件. 这个lazyloadComponent 组件有个缺点 就是,组件在加载前 是什么都不渲染的, 这样子的话,有可能会影响布局, 以及加载前到加载后的切换不好, 有点突兀和生硬.	false
dispatchEvent	触发dom事件	false	Boolean
throttleWait	等待时长	200	Number
observer	是否启用IntersectionObserver, 这个api有兼容问题	false	Boolean
observerOptions	IntersectionObserver选项	{ rootMargin: '0px', threshold: 0.1 }
silent	不打印调试信息	true	Boolean