Как избежать мерцания при первой загрузке страницы из-за изменения стилей CSS с помощью JavaScript ⇐ CSS

[Гость]

У меня возникли небольшие проблемы между порядком загрузки моего CSS и JavaScript.
По сути, происходит следующее: у меня есть элемент div с синим фоном, и мой CSS применяет «разрезаем» его, разрезая по диагонали. При первой загрузке страницы (или при нажатии CTRL+SHIFT+R) «обрезка» отсутствует в течение очень короткого, но заметного времени, а затем появляется после загрузки JavaScript.
I есть этот 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 */
}

Где значения border-top и border-right изменяются с помощью этого JavaScript

Код: Выделить всё

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, который загружается в моем заголовке, а затем из-за JavaScript, который загружается из main.js в нижнем колонтитуле. Есть ли способ предотвратить мерцание?


Источник: https://stackoverflow.com/questions/781 ... g-via-java