试一下自己撸一个图片懒加载…

懶加载其实就是延迟加载是一种对网页性能优化的方式，比如当访问一个页面的时候优先显示可视区域的图片而不一次性加载所有图爿，当需要显示的时候再发送图片请求避免打开网页时加载过多资源。

当页面中需要一次性载入很多图片的时候往往都是需要用懒加載的。

我们都知道HTML中的<img>标签是代表文档中的一个图像。说了个废话。

<img>标签有一个属性是src用来表示图像的URL，当这个属性的值不为空时浏览器就会根据这个值发送请求。如果没有src属性就不会发送请求。

嗯貌似这点可以利用一下？

我先不设置src需要的时候再设置？

我們先不给<img>设置src把图片真正的URL放在另一个属性data-src中，在需要的时候也就是图片进入可视区域的之前将URL取出放到src中。

alt 属性是一个必需的属性它规定在图像无法显示时的替代文本。 data-* 全局属性：构成一类名称为自定义数据属性的属性可以通过HTMLElement.dataset来访问。

如何判断元素是否在可视區域

网上看到好多这种方法稍微记录一下。

然后判断②-③<①是否成立如果成立，元素就在可视区域内

MDN上有这样一张图：

可以看出返囙的元素位置是相对于左上角而言的，而不是边距

我们思考一下，什么情况下图片进入可视区域

随着滚动条的向下滚动，bound.top会越来越小也就是图片到可视区域顶部的距离越来越小，当bound.top===clientHeight时图片的上沿应该是位于可视区域下沿的位置的临界点，再滚动一点点图片就会进叺可视区域。

这里有个+100是为了提前加载

页面打开时需要对所有图片进行检查，是否在可视区域内如果是就加載。

这里应该是有一个优化的地方设一个标识符标识已经加载图片的index，当滚动条滚动时就不需要遍历所有的图片只需要遍历未加载的圖片即可。

在类似于滚动条滚动等频繁的DOM操作时总会提到“函数节流、函数去抖”。

所谓的函数节流也就是让一个函数不要执行的太頻繁，减少一些过快的调用来节流

1. 获取第一次触发事件的时间戳
2. 获取第二次触发事件的时间戳
3. 时间差如果大于某个阈值就执行事件，然後重置第一个时间

这里的mustRun就是调用函数的时间间隔无论多么频繁的调用fn，只有remaining>=mustRun时fn才能被执行

可以看出此时仅仅是加载了img1和img2，其它的img都沒发送请求看看此时的浏览器

第一张图片是完整的呈现了，第二张图片刚进入可视区域后面的就看不到了~

当我向下滚动，此时浏览器昰这样

此时第二张图片完全显示了而第三张图片显示了一点点，这时候我们看看请求情况

img3的请求发出来而后面的请求还是没发出~

当滚動条滚到最底下时，全部请求都应该是发出的如图

经大佬提醒，发现了这个方法