使用flexbox、图标、字体时页面闪烁，如何让元素就绪后再显示？

先从三个闪烁/偏移的根源入手优化，再结合显示控制，能彻底解决问题：

一、先搞定根源问题 #

1. 修复Flexbox布局偏移 #

给工具栏和它的子元素提前锁定尺寸，避免浏览器回流时重新计算布局：

.header-toolbar {
  width: 100%; /* 或固定宽度 */
  height: 64px; /* 固定高度，防止内容加载后撑高容器 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 提前处理溢出，避免触发回流 */
}

/* 给flex子元素加明确约束，防止临时偏移 */
.header-toolbar .flex-item {
  flex-shrink: 0; /* 不需要收缩的元素加上这个 */
  /* 或者给需要自适应的元素设置flex-basis: auto */
}

2. 消除图标加载延迟 #

要么预加载图标，要么把小图标转成base64嵌入CSS：

• 预加载方式（放HTML头部）：

<link rel="preload" as="image" href="/path/to/your-icon.png">

• base64嵌入方式（彻底消除加载等待）：

.icon-settings {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmH...);
}

3. 控制字体加载避免闪烁 #

用font-display属性调整字体加载策略，或者监听字体加载完成事件：

@font-face {
  font-family: 'YourCustomFont';
  src: url('your-font.woff2') format('woff2');
  font-display: block; /* 字体加载完之前不显示文本，彻底避免切换闪烁 */
}

如果需要更精准控制，用JS监听：

document.fonts.ready.then(() => {
  // 字体加载完成后的逻辑
});

二、实现工具栏就绪后再显示 #

结合上面的优化，用CSS+JS控制元素显示时机：

1. 初始隐藏工具栏 #

用visibility而不是display，保留布局空间，避免显示时的跳动：

.header-toolbar {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.1s ease; /* 可选：加个淡入效果更自然 */
}

.header-toolbar.ready {
  visibility: visible;
  opacity: 1;
}

2. 监听所有就绪条件，触发显示 #

写一段JS，等字体加载完、图标加载完、布局稳定后，给工具栏加ready类：

document.addEventListener('DOMContentLoaded', async () => {
  const toolbar = document.querySelector('.header-toolbar');
  
  // 等字体加载完成
  await document.fonts.ready;
  
  // 等所有背景图标加载完成
  const iconElements = toolbar.querySelectorAll('[style*="background-image"], .icon');
  const iconLoadPromises = Array.from(iconElements).map(el => {
    const bgUrlMatch = getComputedStyle(el).backgroundImage.match(/url\(["']?(.*?)["']?\)/);
    if (!bgUrlMatch || bgUrlMatch[1].startsWith('data:')) return Promise.resolve();
    return new Promise(resolve => {
      const img = new Image();
      img.src = bgUrlMatch[1];
      img.onload = img.onerror = resolve; // 加载成功或失败都算完成
    });
  });
  await Promise.all(iconLoadPromises);
  
  // 等布局稳定（监听两次回流，确保不会再偏移）
  await new Promise(resolve => {
    let checkCount = 0;
    const checkLayout = () => {
      checkCount++;
      if (checkCount === 2) {
        window.removeEventListener('resize', checkLayout);
        resolve();
      }
    };
    window.addEventListener('resize', checkLayout);
    checkLayout(); // 手动触发一次检查
  });
  
  // 所有条件满足，显示工具栏
  toolbar.classList.add('ready');
});

3. 现代浏览器备选方案：content-visibility #

如果只需要等布局和内容就绪，用content-visibility让浏览器推迟渲染：

.header-toolbar {
  content-visibility: hidden;
}

.header-toolbar.ready {
  content-visibility: visible;
}

再结合上面的JS逻辑，满足条件后加ready类即可。

额外优化小技巧 #

• 把CSS代码放在HTML头部，让浏览器尽早开始布局计算。
• 别在DOM加载完后动态修改工具栏的样式或结构，减少回流。
• 本地文件要确保图标、字体的路径正确，避免不必要的加载延迟。

内容的提问来源于stack exchange，提问作者Basj