图片懒加载是一种优化技术，通过将页面上的图片延迟加载，可以提升网页的加载速度和性能。在前端开发中，图片懒加载是一个常见的需求。下面将介绍一些常用的图片懒加载方法和技巧。
为什么需要图片懒加载?
在网页中使用大量的图片是很常见的，然而，这些图片可能会成为网页加载速度变慢的一个重要原因。当浏览器加载页面时，图片会占用大量的带宽和资源，从而导致页面加载时间过长。
为了改善网页性能，我们可以采用图片懒加载的技术。图片懒加载即在页面加载阶段，只加载可视区域内的图片，当用户滚动页面时再加载其他图片，从而提高用户的浏览体验。
图片懒加载的实现方式
1. 基于Intersection Observer API的懒加载
Intersection Observer API是一种现代浏览器原生支持的 API，它能够提供一个观察者，用于检测特定元素是否进入了视窗或离开了视窗。我们可以将其应用在图片懒加载上。
首先，我们需要创建一个观察者实例，指定要观察的元素和回调函数。当被观察的元素进入视窗时，触发回调函数加载图片。
// 创建一个观察者实例
const observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
// 当元素进入视图中时加载图片
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
});
},
{
root: null, // 观察者的根元素，默认是视窗
threshold: 0.1, // 元素可见度达到多少时触发回调函数
}
);
// 监听所有带有"data-src"属性的图片
const lazyImages = document.querySelectorAll('img[data-src]');
lazyImages.forEach(img => {
// 开始观察每个被观察的元素
observer.observe(img);
});
2. 基于scroll和debounce的懒加载
除了使用Intersection Observer API，我们还可以通过scroll事件来实现懒加载。在scroll事件中，通过debounce函数来限制触发频率，避免频繁执行回调函数。
// debounce函数用于限制函数执行频率
const debounce = (fn, delay) => {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
};
};
// 懒加载图片回调函数
const lazyLoad = debounce(() => {
const lazyImages = document.querySelectorAll("img[data-src]");
lazyImages.forEach(img => {
if (img.getBoundingClientRect().top < window.innerHeight) {
img.src = img.dataset.src;
img.onload = () => {
img.removeAttribute("data-src");
};
}
});
}, 200);
// 监听页面滚动事件
window.addEventListener("scroll", lazyLoad);
优化技巧和注意事项
-
使用合适的占位符：为了防止页面布局变化，在加载图片之前，可以使用一个预定义的占位符，保持页面布局稳定。
-
延迟加载图片：将不可见区域内的图片延迟加载，减少页面加载时间和带宽占用。
-
图片压缩和优化：在将图片应用到网页前，对其进行压缩和优化，以减小文件大小和加快加载速度。
-
懒加载初始可视区域图片：页面初次加载时，可视区域内的图片可以使用普通的方式直接加载，提供更快的展现速度。
-
浏览器兼容性：使用Intersection Observer API时需注意浏览器兼容性，可使用polyfill库进行兼容处理。
总结：图片懒加载是一种提高网页性能和用户体验的重要技术，通过实现合适的懒加载方法，可以有效地减少带宽和资源的消耗，加快页面加载速度。在前端开发中，我们可以根据具体需求选择合适的懒加载方式，并结合优化技巧，提供更好的用户体验。
本文来自极简博客，作者：风吹过的夏天，转载请注明原文链接：前端如何处理图片懒加载
