图片懒加载（Lazy Loading），又称为延迟加载，是指在页面加载完成后，再去加载图片资源，而不是一次性将所有图片资源都加载完毕。它的目的是为了提升页面的加载速度和用户的体验。
我们可以通过JavaScript实现图片懒加载，具体步骤如下：
下面是一个简单的图片懒加载的实现：
// 获取所有需要懒加载的图片
const lazyImages = document.querySelectorAll('.lazy');
// 判断图片是否在可视区域内
const isInViewport = (el) => {
const rect = el.getBoundingClientRect();
return (
rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.left <= (window.innerWidth || document.documentElement.clientWidth)
);
};
// 加载图片
const loadImage = (image) => {
image.src = image.dataset.src;
image.classList.remove('lazy');
};
// 监听滚动事件
window.addEventListener('scroll', () => {
lazyImages.forEach((lazyImage) => {
if (isInViewport(lazyImage)) {
loadImage(lazyImage);
}
});
});
上面的代码中，我们首先获取了所有需要懒加载的图片，然后通过判断图片是否在可视区域内来决定是否加载该图片。如果需要加载，我们就将占位符替换为真实的图片路径，并且移除lazy类名。
图片懒加载是一种优化页面性能和提升用户体验的方法，我们可以通过JavaScript实现图片懒加载。实现图片懒加载的关键是判断图片是否在可视区域内，如果在可视区域内，我们就加载该图片。