图片懒加载是一种优化网页性能的技术，它通过延迟加载不在视口中的图片，从而减少初始页面加载的时间和带宽消耗。在实现懒加载时，通常需要一个占位效果来提升用户体验，例如使用模糊缩略图或纯色背景作为占位符。本文将详细介绍如何用CSS结合HTML和JavaScript实现这种效果。
懒加载的核心思想是：当图片未进入视口时，不加载真实的图片资源，而是用占位符代替；当图片进入视口时，触发加载真实图片的操作。为了实现这一功能，通常需要以下步骤：
data-src属性存储真实图片的URL。src属性为data-src的值以加载真实图片。在这个过程中，CSS可以用来定义占位符的样式，比如渐变背景、模糊效果等。
首先，我们需要定义图片的HTML结构，使用data-src属性存储实际图片路径，并设置一个占位符。
<img
class="lazyload"
data-src="https://example.com/image.jpg"
alt="Lazy Loaded Image"
width="300"
height="200">
接下来，我们通过CSS为图片设置占位效果。这里可以通过以下几种方式实现：
纯色背景：简单地给图片添加一个纯色背景。
.lazyload {
display: block;
background-color: #f0f0f0; /* 灰色背景 */
width: 100%;
height: auto;
}
渐变背景：使用线性渐变模拟图片加载前的效果。
.lazyload {
display: block;
background: linear-gradient(135deg, #f0f0f0, #d8d8d8);
width: 100%;
height: auto;
}
模糊缩略图：提前生成一张模糊版本的缩略图作为占位符。
.lazyload {
display: block;
background-image: url('thumbnail-blurred.jpg'); /* 模糊缩略图 */
background-size: cover;
background-position: center;
width: 100%;
height: auto;
}
动画效果：为占位符添加简单的动画，增强视觉体验。
.lazyload {
display: block;
background: linear-gradient(135deg, #f0f0f0, #d8d8d8);
background-size: 400% 400%;
animation: placeholderShimmer 1.5s ease-in-out infinite;
width: 100%;
height: auto;
}
@keyframes placeholderShimmer {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
最后，我们通过JavaScript检测图片是否进入视口，并替换src属性为data-src的值。
document.addEventListener("DOMContentLoaded", function () {
const lazyImages = document.querySelectorAll(".lazyload");
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // 加载真实图片
img.classList.remove("lazyload"); // 移除懒加载类名
observer.unobserve(img); // 停止观察该元素
}
});
}, { threshold: 0.1 });
lazyImages.forEach(img => {
observer.observe(img);
});
});
以下是懒加载的整体工作流程图，帮助理解其实现逻辑。
flowchart TD
A[页面加载] --> B[初始化IntersectionObserver]
B --> C[遍历所有懒加载图片]
C --> D[观察图片是否进入视口]
D --是--> E[加载真实图片]
E --> F[移除占位效果]
D --否--> G[继续观察]
<body>底部或使用defer属性，避免阻塞页面渲染。IntersectionObserver的浏览器，可以使用轮询（setInterval）或滚动事件监听作为替代方案。