图片懒加载是一种优化网站性能的技术，可以避免同时加载大量图片导致网站变慢。
思路
具体实现步骤如下：
- 在 img 标签中添加占位图或者默认显示的小图，将真实的图片地址放在一个自定义的 data 属性中。
- 使用 JavaScript 获取所有需要懒加载的图片元素，判断是否进入可视区域。
- 当图片进入可视区域时，将 data 属性中的真实图片地址替换为 src 属性，即开始加载图片。
- 对于使用了懒加载的页面，一定要注意设置图片的尺寸，避免出现图片闪烁的情况。
关键技术
那么如何判断图片进入了可视区域。有以下几种方法：
offsetTop < clientHeight + scrollTop。相对于文档顶部。元素顶部距离文档顶部的偏移量小于当前视口的高度加上页面滚动的距离，即元素已经出现在视口中。element.getBoundingClientRect().top < clientHeight。相对于视口顶部。元素相对于视口顶部的距离小于当前视口的高度，同样意味着元素已经出现在视口中。IntersectionObserver。相交。浏览器提供的API，只要isIntersecting就是在视口区域内。
示例
以下是一个懒加载图片的示例代码：
HTML:
<img class="lazy" data-src="image.jpg" src="">
<img class="lazy" data-src="image2.jpg" src="">
JavaScript:
const lazyImages = document.querySelectorAll('.lazy');
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const image = entry.target;
image.src = image.dataset.src;
observer.unobserve(image);
}
});
});
lazyImages.forEach(image => {
observer.observe(image);
});
在上述示例代码中，首先通过 document.querySelectorAll() 方法获取所有需要懒加载的图片元素，然后创建IntersectionObserver实例，并指定其回调函数，最后开始观察目标元素。当某个元素进入视口时，回调函数会被触发，将对应元素的src属性替换为真实的图片地址，并停止观察该元素。
