渐进式渲染怎么做才能不闪屏？

一世杰提问于 2026-03-22 22:30:21 阅读 15

优化

我在做首屏优化，尝试用渐进式渲染先显示骨架屏再加载真实内容，但页面老是闪一下白屏或者布局跳动，体验很不好。

我现在的做法是用 visibility: hidden 隐藏内容区域，等数据回来再切 visibility，但好像没解决问题。有没有更稳的方案？

这是我的关键代码：

.skeleton {
  display: block;
}
.content.loaded {
  visibility: visible;
}
.content:not(.loaded) {
  visibility: hidden;
}

我来解答赞 2 收藏

反馈

1 条解答

明明🍀 Lv1

visibility 切换有时候确实会闪屏，可以试试 opacity 和 transition 结合的方式，这样过渡会平滑一些。你这个情况可以改成：

.skeleton {

  display: block;

}

.content {

  opacity: 0;

  transition: opacity 0.3s ease-in-out;

}

.content.loaded {

  opacity: 1;

}

这样内容加载完成后，通过 opacity 的变化来过渡，体验会好很多。拿去改改。

2026-03-22 23:01