随着互联网的快速发展，用户对网页加载速度和性能提出了更高的要求。而图片是网页中占用大量带宽和资源的元素之一。为了提升网页加载速度和用户体验，开发者们开始采用图片懒加载技术。
什么是图片懒加载
图片懒加载，又称为延迟加载，是一种在用户浏览页面时延迟加载图片的技术。当用户滚动页面时，可视区域的图片才会被加载，而不是一次性加载全部图片。这样能减少初始页面加载时的请求次数和传输流量，提升用户感知的加载速度。
图片懒加载的实现方式
1. 使用 JavaScript
使用 JavaScript 来实现图片懒加载是最常见的方式，下面是一个简单的示例：
window.addEventListener('scroll', lazyLoad);
function lazyLoad() {
const images = document.querySelectorAll('img[data-src]');
for (let i = 0; i < images.length; i++) {
if (isInViewport(images[i])) {
images[i].src = images[i].dataset.src;
images[i].removeAttribute('data-src');
}
}
}
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
在这个示例中，首先我们给 window 对象添加一个 scroll 事件监听器，当用户滚动页面时，触发 lazyLoad 函数。lazyLoad 函数会获取所有带有 data-src 属性的图片元素，判断它们是否在可视区域内，如果是，则将 data-src 的值赋给 src 属性，从而加载图片。
2. 使用 Intersection Observer API
Intersection Observer API 是一种用来监测目标元素是否进入用户可视区域的新 API。与之前的方法相比，使用 Intersection Observer API 更加高效和灵活，适用于异步加载或懒加载场景。
const io = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const image = entry.target;
image.src = image.dataset.src;
observer.unobserve(image);
}
});
});
const images = document.querySelectorAll('img[data-src]');
images.forEach(image => io.observe(image));
在这个示例中，我们创建了一个 IntersectionObserver 对象 io，并传入一个回调函数。回调函数中的 entries 参数包含触发回调的目标元素信息，我们可以使用 isIntersecting 属性来判断目标元素是否进入可视区域。进入可视区域后，我们将 data-src 的值赋给 src 属性，并停止观察该元素，从而实现图片的懒加载。
图片懒加载的优势
1. 提升页面加载速度
图片懒加载可以减少初始页面加载时的请求次数和传输流量，优化网页的加载速度。用户只会加载当前可视区域的图片，而不必等待所有图片都加载完成。
2. 降低服务器压力
通过延迟加载图片，能够降低服务器的压力。因为不需要一次性返回所有图片资源，减少了服务器的响应时间和资源消耗。
3. 提升用户体验
快速加载页面是提升用户体验的重要组成部分。图片懒加载可以提升页面的加载速度，减少用户等待时间，让用户更快地浏览网页内容，提升用户的满意度和留存率。
结语
图片懒加载技术在前端开发中具有重要而广泛的应用价值。通过合理地应用图片懒加载，我们可以改善用户体验，提高网页性能，降低服务器压力，从而为用户创造更好的上网体验。无论是手动实现图片懒加载，还是使用 Intersection Observer API，了解和掌握这个技术将对于前端开发来说是非常有价值的。
本文来自极简博客，作者：绮梦之旅，转载请注明原文链接：图片懒加载技术在前端开发中的应用
