Display a temp image while page loading

Question

I develop a webpage , in that I scrap the data from webpages, so it takes some time to load.

But in that time a blank page will be shown in the background. I need to show an alternate image until the page is loaded. Help me to do this. thanks in advance

Answer 1

if you're using jquery ajax, you can use the .ajaxStart and .ajaxComplete events to display whatever you want

$("#loading").ajaxStart(function(){
    $(this).show();
});


$("#msg").ajaxComplete(function(event,request, settings){
    $(this).append("Request Complete.");
});

Answer 2

A simple and neat solution is to use an animated gif in a div which covers the whole page and is on top of everything else, then when load completes simply hide this layer.

This doesn't require Ajax and has worked since the days of IE4 (when I first used it)

Answer 3

Try this;

1. You need a named div that contains your loading image and has the display set to none.
2. Create a .js file and reference it from each page which needs the loader.
3. In the JS, invoke a method to set the visibility of the div to block (put this in a setTimeout call if you like so it only fires if the page takes more than a few seconds to load).
4. Add a window.onload event to set the display mode of the div back to none.

The only dependency is that if you expect the bulk of the load time to be on the server side you need to ensure the response buffering allows the page to begin loading before server processing completes. Either way, it's a handy script for pages that take a while to load due to network latency, just make sure the .js embed is in the head.