Tips for eliminating flicker upon the initial loading of a webpage caused by dynamic changes in CSS styles through JavaScript

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?

Answer №1

Who needs JavaScript for this task? Using 100vw is just like using 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 */
}

For more information, check out CSS Values and Units

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for handling imports and dependencies in a React component that is shared through npm

Hello everyone, I'm diving into the world of sharing React components and have encountered an interesting challenge that I hope you can help me with. Currently, I have a button component in my app that is responsible for changing the language. My app ...

Angular 5 - Strategies for excluding specific properties from Observable updates

Currently, I am in the process of developing a webpage where users can view and like various videos. The video content and user likes are stored in a database, and I have implemented two Angular services for handling data retrieval and storage. However, I ...

I'm so confused about the operation of each method in this context

I am experimenting with a simple process involving setTimeout function. My goal is to make the letters of a name appear individually and gradually at different times. For example, if the name is NAZ, I want the letters to appear in this order: first N, the ...

Is it possible to create a visual representation (such as a jpg file) of a website page?

Looking to generate an image of a web page, like creating a miniature version of the HTML and images. It doesn't need to be exact (no need for Flash/JavaScript rendering). I plan to use this on Linux - preferably with a Java library, but a command li ...

Incorporating ASP includes within an HTML file

Is there a method to utilize ASP or ASP.NET for including HTML in another HTML file, similar to PHP includes with HTML and the AddType handler in .htaccess? I am exploring options for updating navigation on a Windows server that does not have PHP installe ...

JSON API WebConnector for Tableau

After creating a tableau webconnector to extract data from an internal API, I used earthquakeUSGS.html as a reference (https://github.com/tableau/webdataconnector). The API responds with json data (see code below). Utilizing the "Web data connector simulat ...

Is there a way to bring in both a variable and a type from a single file in Typescript?

I have some interfaces and an enum being exported in my implementation file. // types/user.ts export enum LoginStatus { Initial = 0, Authorized = 1, NotAuthorized = 2, } export interface UserState { name: string; loginStatus: LoginStatus; }; ex ...

display data in a sequential format

Within my MySQL database, there exists a table structure which I will share as a reference: +----+--------------+---------+--------+-----------+ | id | name | place | number | type | +----+--------------+---------+--------+-----------+ | 1 ...

Problem encountered with the JavaScript for loop failing to execute consistently on each iteration

Currently, I am working on a JavaScript code that alerts the count in an array of pages. The variable urls represents an array of page names, while count contains the count value. My goal is to alert the count value for each page in the urls array. Howe ...

What is the best way to add custom styles to Material UI tabs in a React application?

I need help styling my material UI tabs within a react component. I am having trouble getting the styles applied correctly, specifically setting the background color and box shadow of the entire bar, as well as defining the indicator background color and u ...

Animating an image inside a bordered div

I'm attempting to create an animated effect where an image moves randomly within the boundaries of a div container. While I've come across solutions for animating within borders, none have specifically addressed keeping the image inside the div. ...

Creating reactive behavior with a Promise initiated within a constructor - A guide

I am facing an issue with my Thing class. In the constructor, there is an asynchronous operation using fetch. Once the fetch completes, the result is assigned to a field in the Thing object: class Thing { constructor() { this.image = null ...

Having trouble with React list.map not functioning properly while deleting items from local storage?

I'm currently developing a budget tracking application that allows users to input various incomes and expenses. To manage the state of this app, I am utilizing useReducer. Each income and expense is represented as an object, and upon submission by the ...

After reloading the page, Nuxt dynamic routes are displaying a 404 error

Hey there! I'm currently diving into a project that involves using nuxt js, and it's all new to me. I've set it up in spa mode without any modifications in the nuxt config file, just sticking with the default settings. Here's how I&apos ...

In Reactjs, you can prevent users from selecting future dates and times by modifying the KeyboardDateTimePicker component

I am currently using the Material UI KeyboardDateTimePicker component and have successfully disabled future dates with the disabledFuture parameter. However, I am now looking for a way to disable future times as well. Any suggestions or solutions would b ...

Is it possible to modify the size of a bullet image in Javascript?

Can an image bullet style loaded via a URL be resized using JavaScript code like this: var listItem = document.createElement('li'); listItem.style.listStyleImage = "url(some url)"; listItem.style.listStylePosition = "inside"; I aim to increase ...

Messages are not being received despite no errors occurring in the PHP form

I am facing a challenge with a PHP script that is supposed to send a form, but it keeps saying the email has been sent while nothing actually shows up. Do you have any insights on what might be causing this issue? Also, there's nothing in the spam fol ...

Transforming JSON information for Google chart data table

I am currently working on converting JSON data into a suitable format for a Google Chart visualization: var jsonData = {"Battery Voltage, (A)": {"2017-11-11T00:00:00.000Z":12.3, "2017-11-11T00:01:00.000Z":12.35, ...

Troubleshooting problems with deploying an Angular app on Heroku

When I attempt to deploy my Angular app on Heroku, I am running into a 'Not found' error and getting additional information in the console ("Failed to load resource: the server responded with a status of 404"). Below is the entire Heroku build l ...

The multiple lines text box displays an input box

Having a simple issue here, I've set the value of an input text box, but when the page loads it is displaying in multiple lines, and this seems to be happening only on Chrome browser. Can anyone offer any assistance? This is the HTML code for the ...