如何避免页面首次加载时由于通过 JavaScript 更改 CSS 样式而导致的闪烁

Question

我在 CSS 和 JavaScript 的加载顺序之间遇到了一些问题。

基本上，发生的事情是，我有一个蓝色背景的 div，并且我的 css 在其上应用了“剪切”，将其对角切片。当页面首次加载时（或当 CTRL+SHIFT+R 时），“剪切”不会出现很短但明显的持续时间，然后在 JavaScript 加载后出现。

我有这个CSS

.banner-bottom-fx 
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 0 solid transparent; /* changes via JavaScript */
    border-right: 0 solid white; /* changes via JavaScript */
}

通过此 JavaScript 更改 border-top 和 border-right 值

function UpdateBannerFx()
{
    const banner = document.querySelector('.banner-bottom-fx');

    const borderRightWidth = window.innerWidth;
    const borderTopWidth = borderRightWidth / 30;

    banner.style.borderRightWidth = borderRightWidth + 'px';
    banner.style.borderTopWidth = borderTopWidth + 'px';
}

document.addEventListener("DOMContentLoaded", function() 
{
    UpdateBannerFx();
    // Update border widths when window is resized
    window.addEventListener('resize', UpdateBannerFx);
});

我知道“闪烁”是由于我的 CSS styles.css 加载到页眉中，然后是从页脚中的 main.js 加载的 JavaScript。有什么办法可以防止这种闪烁吗？

Answer 1

您不需要为此使用 JavaScript。

100vw

相当于

window.innerWidth

。

.banner-bottom-fx {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: calc(100vw / 30) solid transparent; /* window.innerWidth / 30 */
    border-right: 100vw solid white;  /* window.innerWidth */
}

请参阅 CSS 值和单位