懒加载

 懒加载就是延时加载，当图片出现在可视区域时才进行加载，这样可以优化界面，加快页面初始加载速度。

首先需要了解元素偏移量，可视高度等概念，如下图。

 大概的意思就是：当（Element）的offsetTop = （document.documentElement）对象的clientHeight + scrollTop时，用data-src属性的值替代src。

 见如下写法

​
const imgElement = document.querySelectorAll('img)
let index = 0

function lazyLoad () {
  for (let i = index; i < imgElement.length; i++) {
    if (imgElement[i].offsetTop < document.documentElement) {
      const dataSrc =  imgElement.getAttribute('data-src')
      imgElement[i].setAttribute('src', dataSrc)
      index = i
    }
  }
}

lazyLoad()

window.onScroll = lazyLoad

​

 上面这种写法只是粗略地展示了懒加载的写法，每次onScoll都会调用一次函数非常不合理，可以加上节流进行优化。详见节流与防抖博文。

 

参考：https://www.jianshu.com/p/dcf73ad5ebed