懒加载是一种优化网页加载时间的技术，它允许网页在初次加载时只加载用户可见区域（视口内）的图像，而将其他图像延迟加载直到用户滚动到它们所在的位置。这不仅可以加快网页的加载速度，还能节省带宽。以下是实现图像懒加载的几种方法：
1. 使用HTML的loading属性
HTML原生支持懒加载图像，通过给<img>标签添加loading="lazy"属性即可实现。这是最简单也是推荐的方法，因为它不需要额外的JavaScript代码。
<img src="example.jpg" loading="lazy" alt="Example Image">
这种方法的好处是简单易用，而且被现代浏览器广泛支持。但是，如果需要在老旧浏览器上实现懒加载，可能还需要使用JavaScript。
2. 使用JavaScript实现懒加载
对于不支持loading="lazy"属性的浏览器，你可以使用JavaScript来手动实现懒加载。以下是一个简单的例子，使用IntersectionObserverAPI来观察图像是否进入视口：
<img class="lazyload" data-src="example.jpg" alt="Example Image">
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazyload"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazyload");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// 备选方案：可以在这里写一个简单的回退方案，比如直接加载所有图像
// 或者使用getBoundingClientRect()结合滚动事件监听器来实现懒加载
}
});
这个脚本首先检查浏览器是否支持IntersectionObserver。如果支持，它会创建一个观察者来监视所有具有lazyload类的图像。一旦图像进入视口，观察者函数会将图像的data-src属性值赋给src属性，从而触发图像的加载，并停止观察该图像。
3. 使用第三方库
如果你希望使用更复杂的懒加载功能，或者需要更好的兼容性支持，也可以考虑使用第三方JavaScript库，如Lozad.js、lazysizes等。
这些库通常提供了更多的配置选项，能够处理不仅是<img>标签，还包括背景图像、视频等多种类型的媒体资源的懒加载，而且它们已经处理了各种兼容性问题。
无论采用哪种方法，懒加载都是提升网页性能和用户体验的有效手段。你可以根据项目的需求和目标浏览器的支持情况来选择最合适的实现方式。
发布者：彬彬笔记，转载请注明出处：https://www.binbinbiji.com/html5/3210.html
