如何避免页面首次加载时 JavaScript 引起的 CSS 闪烁？

javascript

2024-03-11 06:56:46

避免页面首次加载时 JavaScript 引起的 CSS 闪烁

问题：闪烁的根源

当页面加载时，JavaScript 可能会动态更改 CSS 样式，导致页面元素的视觉效果短暂变化。这是因为浏览器在应用 JavaScript 更新之前会先呈现页面，从而导致闪烁。

解决方案

为了解决此问题，我们有以下几种方法：

1. 调整 JavaScript 加载顺序

将 JavaScript 文件移动到 HTML 文档的头部，使其在 CSS 文件之后加载。这样可以确保 CSS 样式在 JavaScript 执行之前应用。

2. 使用媒体查询

使用媒体查询根据特定条件隐藏或显示元素。在页面加载时隐藏受 JavaScript 样式影响的元素，然后在 JavaScript 加载后显示它们。

3. 应用 CSS 过渡

通过 CSS 过渡平滑 CSS 样式更改。这样可以消除 JavaScript 更新样式时的闪烁。

4. 利用 CSS 自定义属性

通过 CSS 自定义属性（CSS 变量）动态设置 CSS 样式。在 JavaScript 中更新自定义属性值，而不是直接更新 CSS 属性，可以避免闪烁。

深入探索：示例代码

.banner {
  transition: all 0.5s ease-in-out;
  --border-right-width: 0px;
  --border-top-width: 0px;
  border-right: var(--border-right-width) solid white;
  border-top: var(--border-top-width) solid transparent;
}

function updateBannerFx() {
  const banner = document.querySelector('.banner');
  const borderRightWidth = window.innerWidth;
  const borderTopWidth = borderRightWidth / 30;
  banner.style.setProperty('--border-right-width', `${borderRightWidth}px`);
  banner.style.setProperty('--border-top-width', `${borderTopWidth}px`);
}