Show spicy wheel image until page loads

Question

I am using the code below:

On the layout page inside the body tag:

<div id="loading"> <img src="/images/user_profile/ajax-loading.gif" alt="Loading.." /> </div> 

On the start page:

 <script type="text/javascript"> $(document).ready(function(){ $(window).load(function(){ $('#loading').fadeOut(); }); }); </script> 

CSS

 div.loading{ height: 100px; width: 100px; position: fixed; z-index: 1000; left: 50%; top: 50%; margin: -25px 0 0 -25px; display:block; } 

The problem is that the spinning image does not come immediately, it happens sometime because a blank page appears and the image is displayed just before the page loads.

I want a solution in which the image should be displayed immediately and before the page is fully loaded.

Answer 1

Although there are many ways to preload images (using CSS / Javascript, etc.), the one that worked for me reliably for small images, such as including an image embedded via

 <img src="data:image/gif;base64,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" alt="Loading..." /> 

(Note: the above is a real load loader from AjaxLoad )

It may not be the most readable one, but it is definitely loaded with a document. Assuming this is simple (less than ~ 2Kb), this should not affect your performance at all.

Answer 2

You need to make sure you don't have massive blocking javascript in your head. Move all your javascript to the bottom of the page. Also set the async attribute in the scripts if your code is correctly written for this, otherwise set the defer attribute.

When this is done, you will make sure that your loading screen is the first element of your body, this ensures that resources will be extracted at an early stage. If you have many downloads of css, fonts, etc. Prior to loading the animation, this causes a delay in loading the image, because the outgoing browser connections are saturated with other downloads. Therefore, try to keep the minimum number of downloads or below the important area or select them on demand using the asynchronous resource loader.

The best way to avoid other assets that block the display of your loading animation is to include all the relevant parts in the html. Embed css right above the html for the loading screen and maybe even include the gif source as a base64 encoded URI.

Answer 3

Use separate instances of document.ready and window.load

Example:

HTML

 <img id="test" src="very_tiny_loading_img.gif" alt="Loading..." /> <img src="vary_large_img.jpg" /> 

Js

 $(document).ready(function() { // executes when HTML-Document is loaded and DOM is ready alert("document is ready"); }); $(window).load(function(){ // executes when complete page is fully loaded, including all frames, objects and images alert("window is loaded"); $('#test').fadeOut(); }); 

Work with a warning (replace it with a code)

http://jsfiddle.net/3f2VS/

Note : I use @hexblot to load img in the fiddle because it is a good trick to load a tiny img like this; -)

Answer 4

I think that when you mention the code inside document.ready, it will light up after all the dom settings ... rather use $ (window) .load (), then it will fire an event as soon as the window loads.

Answer 5

I wrote this in my html and it works. But I suggest you put them in separate files

 <style> .no-js #loader { display: none; } .js #loader { display: block; position: absolute; left: 100px; top: 0; } .se-pre-con { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url("http://smallenvelop.com/wp-content/uploads/2014/08/Preloader_8.gif") center no-repeat #fff; 

}

 <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script> <script> $(window).load(function() { // Animate loader off screen $(".se-pre-con").fadeOut("slow");; }); </script> <div class="se-pre-con"></div>'