在现代的网页设计中，使用图片是非常常见的。然而，对于大型图片或较多图片的网站，加载速度可能会变得很慢，这会影响用户体验。为了解决这个问题，我们可以使用图片懒加载技术。
图片懒加载指的是，只加载用户正在浏览的部分图片，而不是一次性加载所有图片。当用户滚动页面时，再加载接下来的图片，从而减少网页加载时间，提升用户体验。
在本篇博客中，我们将使用原生JavaScript实现图片懒加载。
1. HTML结构
首先，让我们来创建一个简单的HTML结构，包含一些需要懒加载的图片。
<!DOCTYPE html>
<html>
<head>
<title>图片懒加载</title>
<style>
img {
width: 300px;
height: 200px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>图片懒加载</h1>
<img src="placeholder.jpg" data-src="image1.jpg" alt="图片1">
<img src="placeholder.jpg" data-src="image2.jpg" alt="图片2">
<img src="placeholder.jpg" data-src="image3.jpg" alt="图片3">
<script src="lazyload.js"></script>
</body>
</html>
上面的代码中，我们为每个需要懒加载的图片添加了data-src属性，用于存储真正的图片地址。初始状态下，所有图片都使用一个占位图像（placeholder.jpg）。
2. JavaScript实现懒加载
接下来，我们将创建一个名为lazyload.js的JavaScript文件，并使用原生JavaScript来实现图片懒加载。
window.addEventListener('DOMContentLoaded', function() {
var images = document.querySelectorAll('img[data-src]');
function preloadImage(img) {
var src = img.getAttribute('data-src');
if (!src) {
return;
}
img.src = src;
img.removeAttribute('data-src');
}
var options = {
rootMargin: '0px',
threshold: 0.1
}
var observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
preloadImage(entry.target);
observer.unobserve(entry.target);
}
});
}, options);
images.forEach(function(image) {
observer.observe(image);
});
});
上面的代码中，我们首先在DOMContentLoaded事件中获取所有带有data-src属性的图片元素。然后，我们定义了一个函数preloadImage，用于加载真正的图片。接下来，我们创建了一个IntersectionObserver实例，并配置rootMargin和threshold选项。这里，rootMargin是指观察窗口周围的外边距，而threshold指定观察目标进入视口的比例。在观察目标进入视口时，我们调用preloadImage函数加载图片，并停止观察该目标。
最后，我们使用forEach循环，对每个图片元素应用IntersectionObserver实例。
3. 测试
现在，我们将在浏览器中打开HTML文件，滚动页面而看到实际效果。当图片进入视口时，懒加载将会加载图片。
结论
JavaScript实现图片懒加载是一种提升网页加载速度和用户体验的好方法。通过仅加载用户正在浏览的部分图片，我们减少了不必要的网络请求，从而提高了页面加载速度。希望这篇博客对你理解和实现图片懒加载有所帮助。
如果您有任何疑问或建议，请随时在下面的评论中提出。谢谢阅读！
本文来自极简博客，作者：编程艺术家，转载请注明原文链接：原生JavaScript实现图片懒加载（JavaScript图片懒加载）
