在网页开发中，图片是不可或缺的一部分，然而加载大量的图片往往会影响网页的加载速度和用户体验。为了提高网页的性能，我们可以使用图片懒加载来延迟加载图片，在用户滚动到相应位置时再进行加载。本文将介绍一种常用的前端图片懒加载实现方法——Intersection Observer，并结合预加载进行更好的优化。
Intersection Observer
Intersection Observer（交叉观察器）是一种用于异步观察目标元素与其祖先元素或顶级文档视窗交叉状态的API。在前端开发中，我们可以使用Intersection Observer来监听元素是否进入了可视区域，从而触发相应的操作。在图片懒加载中，我们可以将Intersection Observer应用于图片元素，当图片进入可视区域时再加载真实的图片资源。
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 节点进入可视区域
const img = entry.target
img.src = img.dataset.src
observer.unobserve(img)
}
})
}, {
root: null, // 根元素，默认为视窗
threshold: 0 // 交叉阈值，0表示目标元素与根元素交叉部分大于0时即触发回调
})
const images = document.querySelectorAll('img[data-src]')
images.forEach(img => {
observer.observe(img)
})
在上述示例代码中，我们首先创建了一个Intersection Observer的实例，通过传入一个回调函数来处理元素交叉状态的变化。在回调函数中，我们判断元素entry是否进入了可视区域isIntersecting，若是则将data-src属性中保存的真实图片地址赋值给src属性，从而实现懒加载的效果。最后，我们遍历页面所有带有data-src属性的img元素，调用observe方法开始监听。
预加载
除了使用Intersection Observer来懒加载图片外，我们还可以使用预加载来进一步优化用户体验。预加载是指在用户操作之前提前加载所需资源，当用户需要时，资源已经加载完成，从而减少用户等待时间。在图片懒加载中，我们可以在图片进入可视区域之前，提前加载图片资源。
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target
img.src = img.dataset.src
observer.unobserve(img)
} else {
const img = entry.target
const imgPreload = new Image()
imgPreload.src = img.dataset.src
}
})
}, {
root: null,
threshold: 0
})
在上述示例代码中，我们在回调函数中添加了一个else分支，在元素未进入可视区域时，创建一个新的Image对象imgPreload，并将真实图片地址赋值给src属性，从而提前加载图片资源。这样可以确保当图片进入可视区域时，已经加载完成或部分加载完成，减少因网络延迟带来的闪烁。
结语
图片懒加载是前端开发中常用的技术之一，通过使用Intersection Observer和预加载，我们可以进一步提高网页的加载速度和用户体验。希望本文对你了解和实现图片懒加载有所帮助。如有疑问或建议，欢迎留言讨论。
本文来自极简博客，作者：编程艺术家，转载请注明原文链接：前端开发中的图片懒加载实现
