在网页开发里，图片的加载速度对网页性能的影响可不小。要是图片加载得慢，用户体验就会大打折扣。今天咱就来聊聊图片懒加载，看看它是怎么实现的，又有哪些性能优化的小技巧。
一、什么是图片懒加载
简单来说，图片懒加载就是在用户浏览网页的时候，只有当图片出现在浏览器的可视区域内，才会去加载这张图片。想象一下，要是一个网页有好多图片，要是一下子全加载，那速度得多慢啊。用了图片懒加载，就可以只加载用户能看到的图片，等用户滚动页面，其他图片进入可视区域了，再去加载，这样就能大大提升网页的加载速度。
举个例子，有一个电商网站，商品展示页面有很多商品图片。如果不用懒加载，用户打开页面，所有图片都会同时加载，可能要等好一会儿页面才能完全显示。但用了懒加载，用户刚打开页面，只有屏幕上能看到的图片会加载，用户滚动页面时，新进入可视区域的图片才会开始加载，这样页面就能很快显示出来，用户体验也会更好。
二、图片懒加载的实现原理
1. 监听滚动事件
要实现图片懒加载，首先得知道什么时候图片进入了可视区域。这就需要监听浏览器的滚动事件。当用户滚动页面时，我们可以通过计算图片的位置和浏览器可视区域的位置，来判断图片是否进入了可视区域。
以下是一段使用 JavaScript 实现监听滚动事件的示例代码（技术栈：Javascript）：
// 监听窗口的滚动事件
window.addEventListener('scroll', function() {
// 当滚动时执行检查图片是否进入可视区域的函数
checkImages();
});
function checkImages() {
// 获取所有需要懒加载的图片元素
const images = document.querySelectorAll('img[data-src]');
// 遍历所有图片元素
images.forEach(function(image) {
// 获取图片元素相对于视口的位置信息
const rect = image.getBoundingClientRect();
// 判断图片是否进入可视区域
if (rect.top < window.innerHeight && rect.bottom >= 0) {
// 如果进入可视区域，将 data-src 属性的值赋给 src 属性，开始加载图片
image.src = image.dataset.src;
// 移除 data-src 属性，避免重复加载
image.removeAttribute('data-src');
}
});
}
在这段代码中，我们首先监听了窗口的滚动事件，当用户滚动页面时，会调用 checkImages 函数。在 checkImages 函数中，我们获取所有带有 data-src 属性的图片元素，然后通过 getBoundingClientRect 方法获取图片元素相对于视口的位置信息。如果图片进入了可视区域，就将 data-src 属性的值赋给 src 属性，开始加载图片，并移除 data-src 属性，避免重复加载。
2. 利用 Intersection Observer API
除了监听滚动事件，还可以使用 Intersection Observer API 来实现图片懒加载。这个 API 可以异步观察目标元素与祖先元素或顶级文档视口的交叉状态。
以下是使用 Intersection Observer API 实现图片懒加载的示例代码（技术栈：Javascript）：
// 创建一个 IntersectionObserver 实例
const observer = new IntersectionObserver((entries, observer) => {
// 遍历所有观察的元素
entries.forEach(entry => {
// 判断元素是否进入可视区域
if (entry.isIntersecting) {
// 如果进入可视区域，将 data-src 属性的值赋给 src 属性，开始加载图片
const img = entry.target;
img.src = img.dataset.src;
// 停止观察该元素
observer.unobserve(img);
}
});
});
// 获取所有需要懒加载的图片元素
const images = document.querySelectorAll('img[data-src]');
// 对每个图片元素进行观察
images.forEach(image => {
observer.observe(image);
});
在这段代码中，我们首先创建了一个 IntersectionObserver 实例，当观察的元素进入可视区域时，会执行回调函数。在回调函数中，我们判断元素是否进入可视区域，如果进入了，就将 data-src 属性的值赋给 src 属性，开始加载图片，并停止观察该元素。
三、图片懒加载的性能优化技巧
1. 占位图的使用
在图片还没加载的时候，可以给它设置一个占位图。占位图可以是一个简单的灰色方块，或者是一个小的加载动画。这样，用户在等待图片加载的过程中，不会觉得页面空白，体验会更好。
以下是一个使用占位图的 HTML 示例（技术栈：HTML）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片懒加载占位图示例</title>
</head>
<body>
<!-- 占位图使用一个灰色的方块 -->
<img data-src="real-image.jpg" src="placeholder.jpg" alt="图片">
<script>
// 监听窗口的滚动事件
window.addEventListener('scroll', function() {
// 当滚动时执行检查图片是否进入可视区域的函数
checkImages();
});
function checkImages() {
// 获取所有需要懒加载的图片元素
const images = document.querySelectorAll('img[data-src]');
// 遍历所有图片元素
images.forEach(function(image) {
// 获取图片元素相对于视口的位置信息
const rect = image.getBoundingClientRect();
// 判断图片是否进入可视区域
if (rect.top < window.innerHeight && rect.bottom >= 0) {
// 如果进入可视区域，将 data-src 属性的值赋给 src 属性，开始加载图片
image.src = image.dataset.src;
// 移除 data-src 属性，避免重复加载
image.removeAttribute('data-src');
}
});
}
</script>
</body>
</html>
在这个示例中，我们给图片设置了一个占位图 placeholder.jpg，当图片进入可视区域时，会将 data-src 属性的值赋给 src 属性，开始加载真实的图片。
2. 图片压缩
在使用图片懒加载的同时，还可以对图片进行压缩。图片文件越小，加载速度就越快。可以使用一些图片压缩工具，如 TinyPNG，来压缩图片。
3. 预加载关键图片
对于一些重要的图片，比如首页的轮播图，可以进行预加载。预加载可以让这些图片在用户浏览页面之前就加载好，提高用户体验。
以下是一个使用 JavaScript 实现图片预加载的示例代码（技术栈：Javascript）：
// 创建一个 Image 对象
const preloadImage = new Image();
// 设置图片的 src 属性
preloadImage.src = 'important-image.jpg';
在这段代码中，我们创建了一个 Image 对象，并设置了它的 src 属性，这样图片就会开始加载。
四、应用场景
图片懒加载适用于很多场景，比如：
- 电商网站：商品展示页面有大量的商品图片，使用图片懒加载可以提高页面的加载速度，让用户更快地看到商品。
- 新闻网站：新闻页面有很多图片，使用图片懒加载可以减少不必要的图片加载，节省用户的流量。
- 博客网站：博客文章中可能会有很多图片，使用图片懒加载可以让文章更快地显示出来，提高用户体验。
五、技术优缺点
优点
- 提高页面加载速度：只加载用户能看到的图片，减少了不必要的图片加载，从而提高了页面的加载速度。
- 节省流量：对于移动设备用户来说，图片懒加载可以节省大量的流量。
- 提升用户体验：页面加载速度快，用户等待的时间就会减少，体验会更好。
缺点
- 兼容性问题：一些旧的浏览器可能不支持 Intersection Observer API，需要使用监听滚动事件的方法来实现图片懒加载。
- 实现复杂度：图片懒加载的实现需要一定的代码量，对于一些初学者来说可能有一定的难度。
六、注意事项
- 占位图的大小：占位图的大小要合适，不能太大，否则会影响页面的加载速度。
- 图片的质量：在压缩图片时，要注意图片的质量，不能压缩得太厉害，否则会影响图片的显示效果。
- 代码的优化：在实现图片懒加载时，要注意代码的优化，避免出现性能问题。
七、文章总结
图片懒加载是一种非常实用的技术，可以大大提高网页的加载速度，节省用户的流量，提升用户体验。通过监听滚动事件或使用 Intersection Observer API，我们可以实现图片懒加载。同时，我们还可以使用占位图、图片压缩、预加载关键图片等性能优化技巧，进一步提高图片懒加载的效果。在使用图片懒加载时，要注意兼容性问题、占位图的大小、图片的质量和代码的优化等。
评论