背景介绍
随着互联网的发展，网页中使用的图片数量越来越多。当页面包含大量图片时，如果一次性加载所有图片，会增加页面的加载时间，导致用户等待时间过长。图片懒加载是一种延迟加载图片的技术，仅在需要显示的时候才加载图片，从而提高页面的加载速度和用户体验。
图片懒加载的原理
图片懒加载的原理很简单，其基本步骤如下：
- 初始化: 在页面加载时，所有的图片元素的
src属性设置为空或占位符，而不是真实的图片地址。 - 监听滚动事件: 监听页面的滚动事件或其他触发条件。
- 判断图片是否进入可视区域: 当滚动事件触发时，判断每个图片元素是否进入了可视区域。可以通过获取图片元素的位置和窗口的可视区域来进行判断。
- 加载图片: 当图片进入可视区域时，将图片的真实地址赋给
src属性，从而触发图片的加载。这样，只有当图片需要显示时才会进行加载，减少了不必要的请求和带宽消耗。 - 延迟加载: 可以在图片元素上设置
data-src属性，将真实的图片地址保存在该属性中。当需要加载图片时，再将data-src的值赋给src属性。
示例代码
下面是一个使用原生 JavaScript 实现图片懒加载的简单示例代码：
<!DOCTYPE html>
<html>
<head>
<title>图片懒加载示例</title>
<style>
.image {
width: 300px;
height: 200px;
background-color: lightgray;
margin: 20px;
}
</style>
</head>
<body>
<div class="image" data-src="image1.jpg"></div>
<div class="image" data-src="image2.jpg"></div>
<div class="image" data-src="image3.jpg"></div>
<div class="image" data-src="image4.jpg"></div>
<div class="image" data-src="image5.jpg"></div>
<script>
function lazyLoadImages() {
const images = document.querySelectorAll('.image');
const options = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const image = entry.target;
const imageUrl = image.getAttribute('data-src');
image.style.backgroundImage = `url(${imageUrl})`;
observer.unobserve(image);
}
});
}, options);
images.forEach(image => {
imageObserver.observe(image);
});
}
// 页面加载完成后调用懒加载函数
document.addEventListener('DOMContentLoaded', lazyLoadImages);
</script>
</body>
</html>
在上述代码中，我们首先定义了一个 lazyLoadImages 函数，在函数内部获取所有图片元素，并创建一个 Intersection Observer 对象来观察图片元素的可见性。
我们通过将 data-src 属性中的图片地址赋给 backgroundImage 属性来实现懒加载。当图片元素进入可视区域时，触发 Intersection Observer 的回调函数，我们将 data-src 的值赋给 backgroundImage，从而加载图片。
最后，我们在页面加载完成后调用 lazyLoadImages 函数，实现图片懒加载。
通过实现图片懒加载，我们可以减少页面加载时间和带宽消耗，提升前端应用的性能和用户体验。记得在实际项目中根据需求进行进一步的样式和逻辑优化。
