1、原理
【】一张图片就是一个标签，浏览器是否发起请求图片是根据的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。
2、懒加载方式
【】纯粹的延迟加载，使用setTimeOut或setInterval
【】条件加载：用户点击或者执行其他操作再加载 其实也包括的滚动可视区域
【】可视区加载
3、判断元素进入视口viewport
【】图片距离顶部距离 < 视窗高度 + 页面滚动高度
imgEle.offsetTop < window.innerHeight + document.body.scrollTop
【】Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置
function isInViewport(ele) {// 元素顶部 距离 视口左上角 的距离top <= 窗口高度 （反例：元素在屏幕下方的情况）// 元素底部 距离 视口左上角 的距离bottom > 0 (反例：元素在屏幕上方的情况)// 元素display样式不为noneconst notBelow = ele.getBoundingClientRect().top <= window.innerHeight ? true : false;const notAbove = ele.getBoundingClientRect().bottom >= 0 ? true : false;const visable = getComputedStyle(ele).display !== "none" ? true : false;return notBelow && notAbove && visable ? true : false;}
【】Intersection Observer（存在兼容性问题，但帅啊）
4、代码实现
【】将懒加载功能设置为自定义指令，封装到插件中
/*** 判断元素可见*/function isVisible(ele){const notBelow = ele.getBoundingClientRect().top <= window.innerHeight ? true : false;const notAbove = ele.getBoundingClientRect().bottom >= 0 ? true : false;const visable = getComputedStyle(ele).display !== "none" ? true : false;return notBelow && notAbove && visable ? true : false;}/*** 对图片进行懒加载*/function lazyLoad(img, src){if(img && src && isVisible(img)){// 元素存在，元素未被加载，元素可见setTimeout(function(){//img.setAttribute('src', src)// 隐形加载图片或其他资源，//创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载let temp = new Image();temp.src = src;//只会请求一次// onload判断图片加载完毕，真是图片加载完毕，再赋值给dom节点temp.onload = function(){// 获取自定义属性src，用真图片替换假图片img.setAttribute('src', src)}}, 1000) // 模拟网络请求慢的情况}}export default {install(Vue, options){Vue.directive('lazy', {bind: function(el, binding, vnode){el.setAttribute('src', options.loading)window.addEventListener('scroll', function(){lazyLoad(el, binding.value)})},inserted: function(el, binding, vnode){lazyLoad(el)}})}}
5、第三方插件
【】安装
npm i -S vue-lazyload
【】main.js 中
import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload, {preLoad: 1.3,error: '../static/goods_default.jpg', // 加载失败或者无资源时显示的图片loading: '../static/weixin.gif', // loading图片，未加载时显示的attempt: 1})
【】vue 页面中
<ul><li v-for="img in list"><img v-lazy="img.src" ></li></ul>
6、总结
【】实现懒加载有四个步骤：
加载 loading 图片判断哪些图片要加载隐形加载图片替换真图片
