怎么实现图片懒加载

懒加载是一种网页心梗优化的方式，他能极大的提升用户体验。就比如说图片，图片一只是影响网页性能的主要元凶，现在一张图片超过几兆已经是很正常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户早就跑了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。

总结2点：

1.全部加载的话会影响用户体验

2.浪费用户的流量，有些用户并不想全部看完，全部加载会耗费大量的流量。

懒加载实现方式

html实现

最简单的实现是在img标签里加上 loading="lazy"

js实现

通过js监听页面滚动，判断当前图片是否到了可视区域：

1.拿到所有图片的dom

2.遍历每个图片判断当前图片是否到了 可视区域

3.如果到了就设置图片的src属性

4.绑定window的scroll事件，对其进行事件监听

页面初始化的时候 img的src实际上是放在data-src属性上的，当元素处于可视访问内的时候，就把data-src赋值给src，完成图片加载。

一开始加载的时候：
<img data-src="https://xx.com/xx.png" src="">

进入可视范围内的时候：

<img data-src="https://xx.com/xx.png" src="https://xx.com/xx.png">

具体实现：

先获取所有图片的dom，通document.body.clientHeight获取可视区域高度，再使用document.querySelectorAll()获取所有的带data-src属性的img，再使用element.getBoundingClientRect()API直接得到元素相对浏览的top值，遍历每个图片判断当前图片是否到了可视区域范围内。代码如下：

function lazyload() {

        let viewHeight = document.body.clientHeight; // 获取可视区域高度

        let imgs = document.querySelectorAll('img[data-src]'); // 获取带data-src属性的img

        imgs.forEach((item, index) => {

                if(item.dataset.src === '') return;

                // 用于活动页面中某个元素的左上右下分别相对浏览器视窗的位置

                let rect = item.getBoundingClientRect();

                if(rect.bottom >= 0 && rect.top < viewHeight) {

                        item.src = item.dataset.src

                        item.removeAttribute('data-src')

                }

        })

}
 

最后给window绑定onscroll事件

window.addEventListener('scroll', lazyload)

这样就完成了一个图片懒加载操作，但是这样就存在较大的性能问题，scroll事件汇总很短的时间执行很多次，严重影响页面性能，为了提供网页性能，我们需要一个节流函数来控制函数的多次触发，在一段时间内（如200ms）只执行一次回调。

节流函数自行百度

最后修改一下scroll事件

window.addEventListener('scroll', throttle(lazyload, 200))