渐进式渲染时首屏内容被二次重绘怎么办？

Dev · 炳诺提问于 2026-02-15 09:11:32 阅读 11

优化

我在用骨架屏做渐进式渲染时遇到个问题，当真实内容加载完成替换骨架屏时，页面会出现明显闪烁。比如下面这个商品卡片：


<div class="skeleton">
  <div class="img-loader"></div>
  <div class="text-loader"></div>
</div>

<div class="product" style="display:none">
  <img src="product.jpg">
  <h3>商品标题</h3>
</div>

我尝试用JavaScript动态切换显示，但发现当元素从隐藏变为显示时，整个卡片会突然跳动。即使设置了相同宽高，为什么还会触发重排？有没有更好的实现方式避免这种视觉跳跃？

我来解答赞 3 收藏

反馈

1 条解答

皇甫梦鑫 Lv1

你这个问题主要是因为元素从隐藏到显示会触发重排，即使宽高一致也会有布局计算。我之前这样搞的，用 visibility 替代 display，避免触发重排，代码如下：

<div class="skeleton" id="skeleton">

  <div class="img-loader"></div>

  <div class="text-loader"></div>

</div>



<div class="product" style="visibility:hidden;opacity:0;transition:opacity 0.3s;" id="product">

  <img src="product.jpg" onload="showProduct()">

  <h3>商品标题</h3>

</div>



<script>

  function showProduct() {

    var skeleton = document.getElementById('skeleton');

    var product = document.getElementById('product');

    skeleton.style.display = 'none';

    product.style.visibility = 'visible';

    product.style.opacity = '1';

  }

</script>

用 visibility:hidden 和 opacity 做过渡，等图片加载完成再切换显示状态，避免闪烁和跳动。记得给图片加个 onload 事件，确保内容加载完成后再做切换。

2026-02-15 09:12