图片预加载时如何避免出现闪烁的空白框？

迷人的慧慧提问于 2026-02-06 14:48:28 阅读 15

优化

在给图片列表实现预加载时遇到了问题。我给图片设置了固定宽高和loading状态，但预加载的空白框还是会先闪一下，特别是网络慢的时候更明显。我尝试过用opacity过渡和visibility属性，但效果不好。

这是我的CSS代码，应该哪里改？


.image-item {
  width: 200px;
  height: 150px;
  background: #f0f0f0;
  transition: opacity 0.3s;
}
.loading {
  opacity: 0.5;
}
.loaded {
  opacity: 1;
}

现在用Intersection Observer监听可见元素，当图片加载完成会添加loaded类。但切换类名时仍然能明显看到灰色背景到图片的闪烁，有什么更好的实现方式吗？

我来解答赞 4 收藏

反馈

2 条解答

程序猿可歆 Lv1

把背景色去掉，用一个占位的透明像素图或者直接用base64嵌入一个透明图片作为默认src，等真实图片加载完成再替换。代码差不多这样：

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="真实图片地址" class="image-item" />

然后在loaded类里把src换成真实图片地址。别忘了改CSS，去掉那个灰色背景，加个object-fit: cover; 保证图片比例正常。差不多就这样，能解决问题就行。

2026-02-15 14:02

闲人春志 Lv1

直接用 opacity 控制确实会有闪烁，因为图片还没加载完成时，背景色和图片之间是两个不同的渲染层，加上过渡会更明显。
可以用 visibility 和 opacity 搭配使用，同时在图片加载完成前不让它触发渲染。

试试这样改 CSS：

.image-item {
width: 200px;
height: 150px;
background: #f0f0f0;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s;
}
.loading {
opacity: 0;
visibility: visible;
}
.loaded {
opacity: 1;
visibility: visible;
}

然后在 JS 中图片加载完成时去掉 loading 类、加上 loaded 类。
这样图片在加载完成前不会显示元素，加载完成时通过 opacity 过渡进来，视觉更平滑。

如果你还用了标签，建议也加个 display: block，避免 inline 元素默认的空白间隙问题。

另外，IntersectionObserver 只加载图片 URL 的话，记得等 img.onload 触发后再移除 loading 类，否则类名可能提前加了，图片还没进 DOM。

2026-02-06 15:04