Vue 图片懒加载 之 Vue-Lazyload

什么叫懒加载

通俗讲 : 懒加载就是延时加载,即当需要用到的时候再去加载。

那什么叫做需要用到的时候?

比如一个图片在没有出现在可视区域内,就已经加载当页面里了, 但只有滚动页面下方式才能看见, 则可以认为这个图片加载的"过早"了。

懒加载的优点

  1. 可以减少首页首次加载的数量,减少服务器的压力
  2. 当网络请求比较慢的时候, 提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点。

为什么使用懒加载

可以想象一个网页打开有成百上千的图片需要加载,页面会变得非常的卡顿,此时如果只是可视区域的图片加载,其他的图片可以暂时有一个占位 loading 图,等滚动它们到可视区域时再去请求真实图片并且替换就好了。vue-lazyload 插件就是解决此类问题的,对vue插件的写法不熟悉的可以先看一下vue插件

懒加载原理是什么

先将 img 标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再 img 标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。

如何实现懒加载

第一步: 安装

npm install vue-lazyload --save

第二步: 全局注册

main.js 文件
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// 配置项
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})
描述 默认 选项
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 是否启用懒加载组件.组件中的内容只有在出现在preload的位置中才会加载组件.这个lazyloadComponent组件有个缺点就是,组件在加载前是什么都不渲染的,这样子的话,有可能会影响布局,以及加载前到加载后的切换不好,有点突兀和生硬. false Boolean
dispatchEvent 触发dom事件 false Number
throttleWait 等待时长 200 Number
observer 等待时长 是否启用IntersectionObserver,这个api有兼容问题 Number
observerOptions IntersectionObserver选项 { rootMargin: '0px',threshold: 0.1 }
silent 不打印调试信息 true Boolean

因为src中的文件会被webpack编译,assets文件夹中的图片地址,会在编译过程中重命名。vue-lazyload是在main.js文件中引入,不会被webpack进行编译,因此vue-lazyload无法获得正确的图片地址,所以直接写相对地址就无法获取到图片正确地址

第三步: 写loading图片的样式(不是必须, 视情况而定)

img[lazy="loading"]{
  display:block;
  width:50px !important;
  height:50px !important;
  margin:0 auto;
  }

第四步: 使用 ( :src--->v-lazy )

  

这里有个坑需要注意
如设置了翻页功能,且每一页都是请求的数据进行渲染。
会发现其他的数据都变了,唯独图片还是原来的图片。
由于使用的数据是父组件传过来的,第一个想到父组件axios异步请求的数据导致子组件可能数据没有动态更新。但监听了下数据,发现确实是改变了 .
解决办法只要加个key就行, 如下代码

你可能感兴趣的:(Vue 图片懒加载 之 Vue-Lazyload)