使用IntersectionObserver实现图片懒加载
懒加载指的是只在需要时才加载资源，避免预先加载所有资源导致页面慢速加载的问题。
懒加载是计算机科学中一个重要的优化思想，如操作系统的page fault和demand paging也体现了lazy initialization的思想。
例如，像搜索引擎展示搜索到的图片时，会有大量的图片请求导致网页加载缓慢，我们可以使用图片懒加载进行优化，将图片的 src 属性设置为一个占位符，然后在用户滚动到图片可视区域时，再通过 JavaScript 动态更新 src 属性以加载图片。这样可以在用户需要时才加载图片，提高页面的性能。
可以使用 JavaScript 的 IntersectionObserver API 来判断用户是否滚动到图片可视区域
// 创建观察器对象
const observer = new IntersectionObserver((entries) => {
// 遍历所有被观察的元素
for (const entry of entries) {
// 判断元素是否进入可视区域
if (entry.isIntersecting) {
// 获取图片元素
const img = entry.target;
// 更新图片的 src 属性
img.src = img.dataset.src;
// 取消观察
observer.unobserve(img);
}
}
});
// 获取所有图片元素
const imgs = document.querySelectorAll('img[data-src]');
// 遍历所有图片元素
for (const img of imgs) {
// 观察图片元素
observer.observe(img);
}
我们首先通过 IntersectionObserver 创建一个观察器对象，并设置回调函数。在回调函数中，我们遍历所有被观察的元素，
并判断它们是否进入可视区域。如果元素进入可视区域，则更新它的 src 属性，然后取消观察。
接下来，我们获取页面中所有带有 data-src 属性的图片元素，然后遍历它们，将每个图片元素都添加到观察器中。这样，观察器会自动监控图片的可视区域，并在图片进入可视区域时调用回调函数。
最后，为了让图片能够正常加载，我们需要在页面初始化时将所有图片的 src 属性设置为占位符，然后将真实的图片地址存储到 data-src 属性中。例如：
<img src="placeholder.jpg" data-src="real-image.jpg" alt="real-image">
这样，在页面初始化时，图片只会加载占位符，而在用户滚动到图片可视区域时，图片才会加载真实图片。这样可以有效减少页面加载时间，提高页面的性能。
投递字节跳动等公司9个岗位