Changing CSS properties via jQuery shows brief visual transition

Question

I have a webpage that reads content from a .txt file and displays the data in a table.

When the .txt file is empty, I want to modify the CSS properties of certain elements, such as the color of the webpage background.

The following jQuery code triggers these modifications:

<script>
window.onload=function(){
    if (theTextFileIsEmpty == true) {
        // Modifications to CSS properties go here.

        $('.button').prop('disabled', true);
        $('.button').css('background-color', '#CBCBCB');
        $('.button').css( 'cursor', 'not-allowed' );

        var content = $('.EmptyFileHeader');
        content.css('display', 'block');

        var content = $('.mainHTMLbody');
        content.css('background-color', '#000000');

        var content = $('.mainHeader');
        content.css('color', '#9C0000');

    }
    else {
        // Then the text file is empty. Set the table's opacity to 100, so that it is visible:
        $('table th').css('opacity', '100');
        $('table td').css('opacity', '100');
        $('table.layout').css('opacity', '100');       
    }
}        
</script>

This code works perfectly, except for one problem. I don't like how the pre-modified (that is, original) CSS properties briefly appear before they disappear every time that the page is loaded.

The issue manifests in every desktop browser that I've tried. This issue never occurs, for some reason, on iOS.

For example: The original background color of the webpage is grey; the above code changes it to black. The webpage initially loads with a grey background, before "switching" to the black background.

This is all done before the user's eyes. I would like these transitions to not be seen; I would like the webpage to show the ultimate CSS properties from the get-go.

How may I accomplish this?

Possible duplicate? See here. stackoverflow.com/questions/5642233/… — user9263373
– user9263373, Commented Feb 4, 2018 at 1:31

MandanaMS · Accepted Answer · 2018-02-04 06:32:30Z

1

$(window).load event is fired after whole content is loaded like page contain images,css etc. use $(document).ready instead of windows.load. if you have problem again try using set time out function (put all your code in it) and set time to 0.

answered Feb 4, 2018 at 6:32

MandanaMS

1615 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Crickets Over a year ago

Using $(document).ready reduces the delay, but there is still a noticeable brief visual transition.

MandanaMS Over a year ago

did you try set time out?

Crickets Over a year ago

I wrapped setTimeout around the OP code and I noticed no improvements.

Collectives™ on Stack Overflow

Changing CSS properties via jQuery shows brief visual transition

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related