网页图片懒加载是一种前端优化技术，可以提升页面加载速度和用户体验。当网页中有大量图片需要加载时，懒加载可以延迟加载图片，只有当用户滚动到图片所在区域时，才加载对应的图片。本篇博客将介绍如何实现网页图片懒加载的方法。
1. 使用 Intersection Observer API
Intersection Observer API 是一种现代浏览器提供的 API，用于监测元素是否进入视口（Viewport）。我们可以利用这个 API 来判断图片是否可见，从而决定是否加载图片。
首先，在 HTML 中定义需要懒加载的图片，可以使用 data-src 属性存储图片的真实地址，例如：
<img src="placeholder.jpg" data-src="image.jpg" alt="Image">
接下来，使用 JavaScript 初始化 Intersection Observer，指定回调函数来处理可见性变化：
// 获取所有需要懒加载的图片
const lazyImages = document.querySelectorAll('img[data-src]');
// 创建 Intersection Observer 实例
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 当图片进入视口时加载真实图片
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
});
});
// 监测所有懒加载图片的可见性
lazyImages.forEach(image => {
observer.observe(image);
});
以上代码通过循环遍历所有需要懒加载的图片，并将它们添加到 Intersection Observer 的监测列表中。当图片进入视口时，将真实图片地址赋给 src 属性，并停止监测该图片。
2. 使用 jQuery.lazy
如果你正在使用 jQuery，也可以使用 jQuery.lazy 插件来实现图片懒加载。这个插件简化了懒加载的实现过程。
首先，在 HTML 中引入 jQuery 和 jQuery.lazy 插件：
<script src="jquery.min.js"></script>
<script src="jquery.lazy.min.js"></script>
接下来，使用 jQuery.lazy 插件初始化懒加载：
$(function () {
$('.lazy').lazy();
});
在 HTML 中，将需要懒加载的图片添加 lazy 类名：
<img class="lazy" data-src="image.jpg" alt="Image">
这样，所有带有 lazy 类名的图片都会被懒加载。当图片进入视口时，自动加载真实图片。
3. 使用自定义 JavaScript 实现
除了使用现有的库和插件，你也可以使用自定义 JavaScript 实现图片懒加载。以下是一个简单的示例：
const lazyImages = Array.from(document.querySelectorAll('img[data-src]'));
function lazyLoad() {
lazyImages.forEach(image => {
if (image.getBoundingClientRect().top <= window.innerHeight && image.getBoundingClientRect().bottom >= 0) {
// 当图片进入视口时加载真实图片
image.src = image.dataset.src;
image.onload = () => {
image.removeAttribute('data-src');
};
}
});
}
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
以上代码定义了一个 lazyLoad 函数，该函数会遍历所有带有 data-src 属性的图片，并判断图片是否进入视口。如果图片进入视口，加载真实图片，并将 data-src 属性移除。
在页面滚动和窗口大小改变时，调用 lazyLoad 函数，实现动态懒加载。
结论
本篇博客介绍了三种实现网页图片懒加载的方法：使用 Intersection Observer API、使用 jQuery.lazy 插件和使用自定义 JavaScript。通过懒加载，我们可以提升页面加载速度和用户体验，特别是在网页中包含大量图片的情况下。选择适合自己的方法，根据需求和技术栈来实现图片懒加载。
本文来自极简博客，作者：微笑向暖阳，转载请注明原文链接：实现网页图片懒加载的方法
