直接附上完整代码
<!DOCTYPE html>
<html>
<head>
<title>图片懒加载示例</title>
<style>
/* 设置占位符的大小和背景颜色 */
.placeholder {
width: 300px;
height: 300px;
background: gray;
}
</style>
</head>
<body>
<h1>图片懒加载示例</h1>
<div id="image-container">
<!-- 占位符和懒加载图片的 data-src 属性 -->
<div class="placeholder" data-src="image1.jpg"></div>
<div class="placeholder" data-src="image2.jpg"></div>
<div class="placeholder" data-src="image3.jpg"></div>
...
</div>
<script>
// 创建 IntersectionObserver 实例
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// 当元素进入视口时，加载懒加载图片
const img = entry.target;
const src = img.getAttribute('data-src');
img.src = src;
observer.unobserve(img); // 停止对该元素的观察
}
});
});
// 获取所有拥有 data-src 属性的元素
const placeholders = document.querySelectorAll('.placeholder');
placeholders.forEach((placeholder) => {
observer.observe(placeholder); // 开始观察每个占位符元素
});
</script>
</body>
</html>
这是使用原生JavaScript实现一个图片的懒加载。想要在react项目中实现图片懒加载的可以看我这一篇博客链接: react项目优化重要手段之一图片懒加载，里面介绍了在react项目中实现图片懒加载以及对IntersectionObserver的介绍