CODEWITHSUNDEEP
javascriptjquerydom
Chris
Chris

Reputation: 151

Hide everything on dom until everything is loaded

I am trying to change the content of a div on the page but the page has a lot of things to load and on slower computers there is a flicker where you can see the div changing (changing through jquery btw). Is there anyway that everything can be hidden and display it all at including the changes I made using jquery?

Upvotes: 5

Views: 1687

Answers (2)

scrblnrd3
scrblnrd3

Reputation: 7416

Perhaps you could do something like

<head>
     <style>
         body{
            display:none;
         }
      </style>
</head>
<body>
   flickery <div></div>s go here
</body>`

And your script

$(window).load(function(){
    $(document.body).css("display","block"); //shows it when all the elements are ready for   presentation
});

Upvotes: 2

Rahul
Rahul

Reputation: 5774

I had a similar issue with my web application.. This is what I did

Hide body in HTML

<body style="display:none">

And write this script : 

$(window).bind("load", function() {
   $("body").fadeIn(100);
});

OR this script 

$(window).load(function () {
   $("body").fadeIn(100);
}

This creates beautiful effect and shows the page ONLY after everything is fully loaded..

Upvotes: 4

Related Questions