前言

图片的懒加载一直都是大厂热门的考题，可为何他能成为大厂们纷纷趋之若鹜的香馍馍呢，这就要提到它的好处了——性能优化，对就是性能优化，要知道，全部的产品最终是要服务于客户的，而谁能使客户的体验感更好，谁就能笑到最后，而性能就是其中最重要的一环。web

什么是图片懒加载？

懒加载突出一个“懒”字，懒就是拖延迟的意思，因此“懒加载”说白了就是延迟加载，好比咱们加载一个页面，这个页面很长很长，长到咱们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其余部分等进入了可视区域在加载。数组

为何要图片懒加载？

懒加载是一种网页性能优化的方式，它能极大的提高用户体验。就好比说图片，图片一直是影响网页性能的主要元凶，如今一张图片超过几兆已是很常常的事了。若是每次进入页面就请求全部的图片资源，那么可能等图片加载出来用户也早就走了。因此，咱们须要懒加载，进入页面的时候，只请求可视区域的图片资源。浏览器

原理

图片懒加载，那咱们要实现懒加载，固然是要对图片下手啦！性能优化

你们都知道，一张图片就是一个标签，而图片的来源主要是src属性。浏览器是否发起亲求就是根据是否有src属性决定的。markdown

既然这样，那么咱们就要对标签的src属性下手了，在没进入可视区域的时候，咱们先不给这个标签赋src属性，这样岂不是浏览器就不会发送请求了。app

实现

1.先介绍几个和懒加载相关的API函数

浏览器窗口的视口（viewport）高度（以像素为单位）；若是有水平滚动条，也包括滚动条高度。

var intViewportHeight = window.innerHeight;布局

Element.clientHeight没有CSS或内联布局框的元素的只读属性为零；不然，它是元素的内部高度（以像素为单位）。它包括填充，但不包括边框，边距和水平滚动条（若是存在）。

document.documentElement.clientHeight//获取屏幕可视区域的高度性能

好啦好啦，讲道理千遍万遍，不如过一遍代码，咱们上代码！学习

与普通的图片懒加载不一样，以下这个多作了 2 个精心处理：

图片所有加载完成后移除事件监听；
加载完的图片，从 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))
   })()
}

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

复制代码

其实吧，这个代码对于大家这些大佬来讲，挺简单的，可是对于我这种小菜鸡来讲，仍是有点困难的，因此我仍是简单讲一下几个点呗，夯实一下我本身的学习，因此大佬们多多担待，多谢多谢！

return (function() {}）这其实就是一个自执行函数的实现。

而什么是自执行函数呢？

自行调用的函数: 就是指,函数在页面载入后或者以前就自行调用,无需借助其余函数或方法来启动;

img.getBoundingClientRect() 咳咳，我想大家都把这个这么长的东东都在脑海里读了一遍吧！嘿嘿，我就没有。

那言归正传，这个东西究竟是啥呢?咱们看到前面加了一个img.那我咱们确定知道它和图片有关，那么咱们来解释一下呗：

img.getBoundingClientRect()就是图片到视窗viewport的上或者左边的距离，它有四个属性

top 图片上边距离视窗上边的距离
bottom 图片下边距离视窗上边的距离
left 图片左边距离视窗左边的距离
right 图片右边距离视窗左边的距离

这样说，是否是有点模糊呢？因此说，我是个好人，精心为大家“偷”了张图片过来，看了下面那张图，你就全懂了。

document.removeEventListener('scroll', imgLazyLoad) 这里呢，就是图片所有加载完成后移除事件监听，那它这样干的理由是什么呢？

没错，就是防抖处理

简而言之就是，经过移除监听事件来实现防抖处理。

而，关于防抖，我就简单说一下，不作过多解释，个人下篇文章会讲。什么？你问下篇文章在哪？额。。。，我只能告诉你，等几天！

防抖：防止抖动，以避免把一次事件误执行屡次，影响性能，好比敲键盘就是一个天天都会接触到的防抖操做。 4. !deleteIndexList.includes(index)

includes() 方法用于判断字符串是否包含指定的子字符串。

若是找到匹配的字符串则返回 true，不然返回 false。

注意： includes() 方法区分大小写。

我想不少同窗都对这个!deleteIndexListincludes(index)有点莫名其妙吧，那咱们来解析一下呗！

首先，deleteIndexList.includes(index)是一个方法，没错吧！它就是查询deleteIndexList数组里是否含有指定的index若是有，咱们就返回ture不然就返回false.
那前面再加上！是啥意思呢，咱们都知道！有取反的意思，因此在方法前面加上！就是对于方法的返回值取反。

总结： 因此这句代码的做用就是删除imgLIst里面加载完的图片。

总结

好了好了，介绍也介绍的差很少了，剩下的相信以小伙伴们的实例，解决它就是洒洒水的事情，因此咱们到这里就结束咯，小伙伴们加油加油！拜拜