图片懒加载

一、概念

“懒加载”就是延迟加载，比如我们加载一个页面，这个页面长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域再加载。懒加载是一种网页性能优化的方式，它能极大的提升用户体验。比如图片，现在一张图片经常会超过几兆，如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。

二、原理

图片的来源主要是src属性，浏览器是否发起请求是根据是否有src属性决定的。我们考虑在没进入可视区域的时候，我们先不给这个图片标签赋src属性，这样浏览器就不会发送请求了。

三、实现

• window.innerHeight：浏览器窗口的视口（viewport）高度（以像素为单位），如果有水平滚动条，也包括滚动条高度
• document.documentElement.clientHeight：获取屏幕可视区域的高度

• getBoundingClientRect()：获取元素的大小及位置，它有四个属性，top -上边距离视窗上边的距离，bottom -下边距离视窗上边的距离，left 左边距离视窗左边的距离，right -右边距离视窗左边的距离，如图：

  
  
• 代码实现

// 图片全部加载完成后移除事件监听；
// 加载完的图片，从 imgList 移除；
let imgList = [...document.querySelectorAll('img')]
let length = imgList.length
// 把图片查询分配到一个数组
const imgLazyLoad = function() {
    let count = 0
   return (function() {
        let deleteIndexList = []
        imgList.forEach((img, index) => {
            let rect = img.getBoundingClientRect()
            if (rect.top < window.innerHeight) {
                img.src = img.dataset.src
                deleteIndexList.push(index)
                count++
                if (count === length) {
                    document.removeEventListener('scroll', imgLazyLoad)
                }
            }
        })
        imgList = imgList.filter((img, index) => !deleteIndexList.includes(index))
        // 删除imgList里面加载完的图片
   })()
}

// 这里最好加上防抖处理
document.addEventListener('scroll', imgLazyLoad)

//document.removeEventListener('scroll', imgLazyLoad) 就是图片全部加载完成后移除事件监听，通过移除监听事件来实现防抖处理