骨架屏切换时为什么会出现闪烁？如何避免布局抖动？

这个问题确实挺常见的，骨架屏闪烁或者布局抖动的核心原因在于骨架屏和真实内容的尺寸不一致。你用了opacity过渡，但opacity只是视觉上的透明度变化，它并不会影响布局，所以即使视觉上看起来在淡入淡出，实际内容加载时的尺寸差异仍然会导致页面跳动。

接下来咱们分步骤解决这个问题：

第一步，确保骨架屏和真实内容的尺寸完全一致。这是最关键的一步。你提到用fixed宽高，但真实图片加载后还是有宽度变化，这说明你的骨架屏样式没有完全模拟真实内容的布局。我们需要仔细检查每个元素的宽高、间距、边距等属性。

比如，假设真实头像的宽度是40px，高度也是40px，那么骨架屏的avatar部分也需要设置成同样的宽高。另外，别忘了图片可能会有border-radius或者其他装饰性样式，这些也需要同步到骨架屏上。

/* 骨架屏样式 */

.card.skeleton {

  display: flex;

  align-items: center;

}



.card.skeleton .avatar {

  width: 40px; /* 和真实头像一致 */

  height: 40px; /* 和真实头像一致 */

  background-color: #eee; /* 模拟占位背景色 */

  border-radius: 50%; /* 如果真实头像是圆形，这里也要加 */

}



.card.skeleton .content {

  margin-left: 10px; /* 和真实内容的间距一致 */

  width: 200px; /* 根据真实内容调整 */

  height: 20px; /* 根据真实内容调整 */

  background-color: #eee; /* 占位背景色 */

}

第二步，避免直接切换显示隐藏，而是用CSS动画平滑过渡。你提到用opacity，但单纯用opacity可能不够，因为它只控制透明度，而不会阻止元素从DOM中移除或重新插入。建议结合visibility和position来处理。

具体来说，当真实内容加载完成后，不要直接移除骨架屏，而是让它逐渐透明并隐藏，同时让真实内容逐渐显示出来。这样可以避免瞬间的布局重排。

/* 平滑过渡动画 */

.card {

  transition: opacity 0.3s ease, visibility 0.3s ease;

}



.card.skeleton {

  position: relative; /* 确保骨架屏和真实内容在同一位置 */

}



.card.loaded .skeleton {

  opacity: 0;

  visibility: hidden; /* 隐藏但保留占位 */

}



.card.loaded .real-content {

  opacity: 1;

  visibility: visible;

}

第三步，在JavaScript中控制加载状态的变化。你需要一个标志位来标记内容是否已经加载完成，并且通过这个标志位来触发动画。

// 假设你用的是Vue

data() {

  return {

    loaded: false // 初始状态未加载

  };

},

methods: {

  loadContent() {

    // 模拟异步加载

    setTimeout(() => {

      this.loaded = true; // 加载完成后更新状态

    }, 1000);

  }

},

mounted() {

  this.loadContent(); // 页面加载时触发内容加载

}

对应的HTML结构需要稍微调整一下：

<div class="card" :class="{ loaded: loaded }">

  <div class="skeleton">

    <div class="avatar"></div>

    <div class="content"></div>

  </div>

  <div class="real-content" v-if="loaded">

    <img class="avatar" src="user.jpg">

    <p class="content">Hello World</p>

  </div>

</div>

最后一步，检查图片加载对布局的影响。有时候图片加载慢会导致布局抖动，即使你设置了固定宽高。为了解决这个问题，可以在真实图片加载前先用一个占位图或者背景色填充，确保图片加载完成后再替换。

/* 图片占位样式 */

.real-content .avatar {

  width: 40px;

  height: 40px;

  background-color: #f0f0f0; /* 占位背景色 */

  border-radius: 50%;

}

总结一下，核心思路就是：确保骨架屏和真实内容的尺寸一致，用CSS动画平滑过渡，避免直接切换显示隐藏，同时注意图片加载对布局的影响。按照这些步骤调整后，页面的抖动问题应该能得到有效解决。如果还有问题，可以用Chrome开发者工具的Performance面板检查具体的渲染过程，看看哪里还有优化空间。