Struggling with the load order of my CSS and JavaScript...
Currently, I have a div with a blue background that is styled to appear sliced diagonally. However, upon initial page load (or CTRL+SHIFT+R), there's a brief moment where the slice effect doesn't display before quickly appearing once the JavaScript loads.
Here's the CSS code:
.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 */
}
The JavaScript responsible for updating the border values:
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);
});
The flicker issue is caused by CSS styles loading in the header and then the JavaScript loading at the footer. Any suggestions on how to eliminate this flicker?