图片懒加载的纯 CSS 实现（loading='lazy' 备用方案）

在现代网页开发中，图片懒加载（Lazy Loading）已成为优化页面性能的重要手段。虽然现代浏览器已原生支持 loading='lazy' 属性，但在某些场景下，我们可能需要纯 CSS 的解决方案作为备用方案。本文将介绍几种纯 CSS 实现的图片懒加载技术。

为什么需要纯 CSS 懒加载方案？

1. 兼容性考虑：虽然大多数现代浏览器支持 loading='lazy'，但仍有部分旧版本浏览器不支持
2. 特殊需求：某些项目可能有禁用 JavaScript 的要求
3. 渐进增强：作为 JavaScript 方案的优雅降级方案

方法一：利用 CSS 的 :hover 和 :focus 伪类

.lazy-img {
  display: none;
}

.lazy-img:hover,
.lazy-img:focus {
  display: block;
}

这种方法简单但局限性明显，只有当用户与元素交互时才会加载图片。

方法二：利用 CSS 的 @media 查询和视口检测

@media (hover: hover) {
  .lazy-img {
    display: none;
  }
  
  .lazy-img.visible {
    display: block;
  }
}

这种方法需要结合少量 JavaScript 来添加 visible 类，但可以作为渐进增强方案。

方法三：利用 CSS 的 content 属性和数据属性

<img data-src="image.jpg" class="lazy-img" alt="示例图片">

.lazy-img {
  background: #f0f0f0;
}

.lazy-img::before {
  content: attr(data-src);
  display: none;
}

.lazy-img.loaded {
  background: none;
}

这种方法需要 JavaScript 来切换类名，但提供了更好的降级体验。

方法四：利用 CSS 的 object-fit 和占位符

.lazy-img {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 宽高比 */
  background: #f0f0f0;
  position: relative;
}

.lazy-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s;
}

.lazy-img img.loaded {
  opacity: 1;
}

最佳实践建议

1. 结合使用：纯 CSS 方案最好与 loading='lazy' 或 JavaScript 方案结合使用
2. 占位符设计：为未加载的图片提供适当的占位空间，避免布局偏移
3. 性能考量：即使使用 CSS 方案，也要确保图片经过适当优化（压缩、正确格式）
4. 渐进增强：优先使用原生 loading='lazy'，然后回退到 JavaScript 方案，最后考虑纯 CSS 方案

结论

虽然纯 CSS 的懒加载方案无法完全替代 loading='lazy' 或 JavaScript 实现的功能，但在特定场景下可以作为有效的备用方案。开发者应根据项目需求和目标受众选择合适的实现方式，始终将性能优化和用户体验放在首位。

记住，任何优化方案都应该在实际环境中进行测试，确保其真正提升了页面性能而不是引入了新的问题。