要实现 <img> 标签的 懒加载（lazy loading），确保在用户滚动到图片位置时再加载图片，从而提高页面性能，我们可以通过不同的方法来实现懒加载。以下是几种常见的实现方式，每种方式我都会进行详细解释，并展示代码示例。
1. 使用原生 HTML5 属性 loading="lazy"（最简单）
HTML5 提供了原生的懒加载功能，通过在 <img> 标签中添加 loading="lazy" 属性，你可以让浏览器自动处理图片的懒加载。当图片即将出现在视口时，浏览器会自动加载它。
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>原生懒加载</title>
</head>
<body>
<h1>图片懒加载示例（HTML5 原生）</h1>
<img
src="https://cdn.pixabay.com/photo/2021/07/16/14/54/cat-6602447_960_720.jpg"
alt="A cute kitten"
loading="lazy"
/>
<img
src="https://cdn.pixabay.com/photo/2021/07/16/14/54/cat-6602447_960_720.jpg"
alt="Another cute kitten"
loading="lazy"
/>
</body>
</html>解释：
loading="lazy"：告诉浏览器该图片应该懒加载，只有在图片即将进入视口时才会开始加载。- 这种方法非常简单，现代浏览器（如 Chrome、Firefox、Edge）都支持它。
- 优点：非常简单，原生支持，易于实现，自动处理图片加载。
- 缺点：不支持旧版本的浏览器（如 Internet Explorer）。
2. 使用 Intersection Observer API（自定义懒加载）
如果你需要更大的控制权，或者需要支持更老的浏览器，可以使用 JavaScript 和 Intersection Observer API 来实现懒加载。通过该 API，你可以更灵活地定义图片进入视口时的加载行为。
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Intersection Observer 实现懒加载</title>
<style>
img {
max-width: 100%;
height: auto;
border-radius: 10px;
opacity: 0;
transition: opacity 1s ease-in-out;
}
/* 占位符的样式 */
.lazy-load {
opacity: 0;
}
</style>
</head>
<body>
<h1>图片懒加载示例（Intersection Observer）</h1>
<img
data-src="https://cdn.pixabay.com/photo/2021/07/16/14/54/cat-6602447_960_720.jpg"
src="https://via.placeholder.com/600x400/cccccc/ffffff?text=Loading..."
alt="A cute kitten"
class="lazy-load"
/>
<img
data-src="https://cdn.pixabay.com/photo/2021/07/16/14/54/cat-6602447_960_720.jpg"
src="https://via.placeholder.com/600x400/cccccc/ffffff?text=Loading..."
alt="Another cute kitten"
class="lazy-load"
/>
<script>
const lazyImages = document.querySelectorAll('img.lazy-load');
const observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // 设置实际图片路径
img.onload = () => {
img.classList.remove('lazy-load'); // 加载完成后移除占位符样式
img.style.opacity = 1; // 图片渐显
};
observer.unobserve(img); // 停止观察当前图片
}
});
},
{
rootMargin: '100px', // 提前加载图片，避免滚动时出现延迟
},
);
lazyImages.forEach((image) => {
observer.observe(image); // 观察每个图片
});
</script>
</body>
</html>解释：
IntersectionObserver API：这是一个浏览器 API，可以用来检测元素是否进入视口。我们通过它来控制何时加载图片。data-src：图片的真实地址存储在data-src中，初始时src设置为占位符图像。rootMargin: '100px'：通过rootMargin提前 100px 加载图片，这样当图片接近视口时就会加载。- 优点：非常灵活，可以通过 JavaScript 控制加载行为，并提供额外的功能（如渐显动画）。
- 缺点：需要用 JavaScript 实现，且某些旧版浏览器不支持
IntersectionObserver（可以使用 polyfill）。
3. 使用占位符和渐进式加载（带占位图）
为了更好的用户体验，我们还可以使用占位图（如透明的 GIF 图片）作为占位符，直到实际图片加载完成。这个方法通常与懒加载一起使用。
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>占位符和渐进式加载</title>
<style>
img {
width: 100%;
height: auto;
border-radius: 10px;
opacity: 0;
transition: opacity 1s ease-in-out;
}
</style>
</head>
<body>
<h1>图片懒加载示例（占位符和渐进式加载）</h1>
<img
data-src="https://cdn.pixabay.com/photo/2021/07/16/14/54/cat-6602447_960_720.jpg"
src="https://via.placeholder.com/600x400/cccccc/ffffff?text=Loading..."
alt="A cute kitten"
class="lazy-load"
/>
<img
data-src="https://cdn.pixabay.com/photo/2021/07/16/14/54/cat-6602447_960_720.jpg"
src="https://via.placeholder.com/600x400/cccccc/ffffff?text=Loading..."
alt="Another cute kitten"
class="lazy-load"
/>
<script>
const lazyImages = document.querySelectorAll('img.lazy-load');
const observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // 设置实际图片路径
img.onload = () => {
img.style.opacity = 1; // 图片加载完成后渐显
};
observer.unobserve(img); // 停止观察当前图片
}
});
},
{
rootMargin: '100px', // 提前加载
},
);
lazyImages.forEach((image) => {
observer.observe(image); // 观察每个图片
});
</script>
</body>
</html>解释：
- 初始时，图片显示为 占位符图像（如
https://via.placeholder.com/600x400/cccccc/ffffff?text=Loading...）。 - 当图片进入视口时，使用
IntersectionObserver加载实际图片。 - 图片加载完成后，通过
opacity渐变显示效果，让图片平滑显示。
总结：
- 原生 HTML5（
loading="lazy"）：简单易用，浏览器自动处理懒加载，适用于现代浏览器。 - Intersection Observer：通过 JavaScript 控制懒加载，提供更灵活的实现，可以加上渐显效果，支持更多功能。
- 占位符和渐进式加载：结合占位符和渐变加载效果，提升用户体验，直到实际图片加载完成。
这些方法都可以用来实现 懒加载，根据需求和兼容性选择适合的方式来实现。
最后更新于: