1.图片懒加载
1.1.什么是图片懒加载
图片懒加载 图片的懒加载就是在页面打开的时候,不要一次性全部显示页面所有的图片,而是只显示当前视口内的图片,一般在移动端使用(PC端主要是前端分页或者后端分页)。
优点:页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好;
1.2.为什么要使用懒加载?
很多页面,内容很丰富且很长,图片较多。比如说各种商城页面。这些页面图片数量多,而且比较大,少说百来K,多则上兆。要是页面载入就一次性加载完毕,可能会等待较长的时间,没有丝滑的使用体验。
1.3.懒加载的原理是什么?
懒加载的原理就是先在页面中把所有的img标签中的src使用一张占位图进行占位,等到浏览到响应的位置再把相应的src值传入进去。
页面加载完成后,根据scrollTop判断图片是否在用户的视野内,如果在再把图片链接存放到src属性中。
2.Vue-Lazyload插件的使用
2.1.安装
npm install vue-lazyload --save
2.2.在main.js中全局注册
import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)// 配置项Vue.use(VueLazyload, {preLoad: 1.3,error: 'error.png',loading: 'loading.gif',//懒加载时占位图片(加载中...)attempt: 1})
2.3.在页面中使用
把原本的src替换成v-lazy
<li><img v-lazy="img.png"></li>或是<li v-for="(img,index) in imgList"><img :v-lazy="img.url"></li>
需要的话对占位图片可以设置样式
img[lazy="loading"]{display:block;width:50px !important;height:50px !important;}