css初学者项目中实现图片懒加载样式-css教程-PHP中文网

css初学者项目中实现图片懒加载样式

P粉602998670

发布： 2025-09-27 12:44:02

原创

286人浏览过

先用占位图和data-src存储真实地址，通过JavaScript监听视口加载图片，CSS设置过渡效果和固定尺寸防止抖动，实现平滑懒加载。

css初学者项目中实现图片懒加载样式

图片懒加载是一种优化网页性能的常用技术，尤其适合图片较多的页面。对于CSS初学者来说，虽然懒加载的核心逻辑通常由JavaScript实现，但CSS在视觉效果和布局上起着关键作用。下面介绍如何用简单的HTML、CSS配合少量JavaScript实现基础的图片懒加载样式。

1. 基本原理与HTML结构

懒加载的思路是：页面初始时不加载所有图片，而是先用一个占位图或低质量缩略图代替，当用户滚动到该位置时再加载真实高清图片。

使用 data-src 属性存储真实图片地址，src 放置占位图或透明小图：

<img class="lazy" src="placeholder.jpg"  alt="示例图片">

登录后复制

2. CSS样式设计

通过CSS设置图片容器的样式，让占位图看起来更自然，并添加加载动画提升用户体验。

AI-Text-Classifier

OpenAI官方出品，可以区分人工智能书写的文本和人类书写的文本

查看详情

立即学习“前端免费学习笔记（深入）”；

/* 图片基本样式 */
.lazy {
  width: 100%;
  height: 300px;
  object-fit: cover;
  background-color: #f0f0f0; /* 灰色背景作为占位 */
  opacity: 0.7;
  transition: opacity 0.5s ease-in-out;
}
<p>/<em> 加载完成后显示清晰图 </em>/
.lazy.loaded {
opacity: 1;
}</p>

登录后复制

3. 简单JavaScript触发懒加载

虽然重点是CSS，但需要一点JS来判断图片是否进入视口并替换真实图片：

document.addEventListener("DOMContentLoaded", function () {
  const lazyImages = document.querySelectorAll(".lazy");
<p>const imageObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // 替换为真实图片
img.classList.add("loaded"); // 添加loaded类触发动画
imageObserver.unobserve(img); // 加载后停止监听
}
});
});</p><p>lazyImages.forEach((img) => {
imageObserver.observe(img);
});
});</p>

登录后复制