解剖原生JS之图片懒加载，这一个就够了！
2024-02-19 01:45:37
懒加载的意义：提高性能，改善体验
在如今的互联网世界中，网站的加载速度已成为影响用户体验的重要因素之一。当访问一个包含大量图片的网页时，一次性加载所有图片可能导致页面加载缓慢，尤其是在网络连接不佳的情况下。
懒加载技术应运而生，它是一种延迟加载机制，可以优化网页性能，提高用户体验。懒加载的核心思想是只在需要时加载图片，而不是一开始就加载所有图片。这可以显著减少页面加载时间，并避免因过多图片请求而导致的网络拥塞。
原生JS实现懒加载的步骤
1. 标记需要懒加载的图片
首先，我们需要标识出需要懒加载的图片。最常用的方法是添加一个data属性，例如：
<img data-lazy-src="image.jpg" alt="My Image">
data-lazy-src是自定义的属性，用来存储图片的真实地址。alt是图片的替代文本，用于在图片无法加载时显示给用户。
2. 创建Intersection Observer对象
Intersection Observer API允许我们监听元素是否进入或离开视口，这是实现懒加载的关键。
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// 当元素进入视口时，加载图片
const img = entry.target;
img.src = img.dataset.lazySrc;
}
});
});
我们创建了一个Intersection Observer对象observer，并在其回调函数中监听元素是否进入视口。当元素进入视口时，加载图片。
3. 观察需要懒加载的图片
接下来，我们需要使用Intersection Observer对象来观察需要懒加载的图片。
const images = document.querySelectorAll('img[data-lazy-src]');
images.forEach((img) => {
observer.observe(img);
});
我们通过querySelectorAll()方法获取所有需要懒加载的图片，然后使用forEach()方法逐个观察这些图片。
4. 清理Intersection Observer对象
当图片加载完成后，我们需要清理Intersection Observer对象，以避免不必要的内存消耗。
const images = document.querySelectorAll('img[data-lazy-src]');
images.forEach((img) => {
observer.unobserve(img);
});
我们再次使用querySelectorAll()方法获取所有需要懒加载的图片，然后使用forEach()方法逐个取消观察这些图片。
额外优化
1. 减少HTTP请求
图片懒加载可以减少HTTP请求的数量，从而提高网页加载速度。我们可以通过以下方式进一步减少HTTP请求：
- 合并CSS和JS文件
- 压缩CSS和JS文件
- 使用CDN托管静态资源
2. 优化图片格式
图片格式的选择也会影响网页加载速度。一般来说，推荐使用WebP格式的图片，因为它可以提供更好的压缩率。
3. 使用适当的图片尺寸
图片尺寸应根据实际需要进行调整，以避免不必要的加载时间。可以使用工具或脚本来自动调整图片尺寸。
总结
懒加载技术是一种有效优化网页性能的常用方法，它可以通过延迟加载图片来减少HTTP请求的数量，并避免一次性加载所有图片，从而显著提高网页加载速度。原生JS实现的图片懒加载简单易用，可以快速集成到网站中。通过本文介绍的步骤，您可以轻松构建自己的图片懒加载解决方案，提高网站性能并改善用户体验。
