jQuery Hide until Page Loads

Glenn Glenn's Blog 0 Comments

Recently we were using the great EU Cookie Compliance plugin Cookie Control on a client site (also seen on this site bottom left of page), but found that within the custom WordPress Theme that the Cookie Compliance scripts and CSS were loading with a flash of the unformatted and unhidden content. That looked rather ugly so we decided to implement a simple bit of jQuery to hide the Cookie Control Div and content until everythign else (including the script css) was loaded, Here is the jQuery snippet:-


<script type="text/javascript">
jQuery(window).load(function(){
 //jQuery(".loading").fadeOut("slow");
 jQuery("#cccwr").fadeIn("slow");
});
 </script>

Link this with some very basic CSS:-

[css]
/* Cookie Control | Hide until page has loaded */
#cccwr {
display: none;
}
[/css]

A second function is commented and that could be uncommented if you had a loading div (such as a spinning wheel etc).
This could also be done with just jQuery like so:-


<script type="text/javascript">
jQuery(document).ready(function(){
        jQuery("#yourdiv").hide();
     });

    jQuery(window).load(function(){
        jQuery("#loading").fadeOut("slow");
        jQuery("#yourdiv").fadeIn("slow");
     });
 </script>

Note: Within our code we substitute $ for jQuery as WordPress often needs to be told we are using jQuery other than just Javascript. This remove issues where WordPress doesn’t run the script.

About the Author
jQuery Hide until Page Loads jQuery Hide until Page Loads 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced WordPress Web Developer, Front-end and Back-end Developer & New Media Specialist with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries built up over a number of years.

Leave a Reply

Your email address will not be published. Required fields are marked *


*