Display Loading Image before a page gets loaded completely

Question

Hello,

I want to show a loading image before the content of the whole page is loaded. How to achieve this? I'm working in ASP.NET.

Thank you. NLV

Answer 1

You would need to use Javascript to accomplish this. My preference is jQuery. jQuery has a function that executes when the page is fully loaded, so you could set your main content div to have a css property display:none, and then when the DOM is ready, you could use jQuery to show the content:

$(document).ready(function() {
    $("#myContent").css("display", "block");
});

Answer 2

You should initially have the image showing in your HTML, and then hide it when the page loads, like this:

Javascript:

window.onload = function() {
    document.getElementById( 'loadingImageIDHere' ).style.display = 'none';
}

EDIT: The OP tagged this question as 'javascript', NOT 'jquery'!!

Answer 3

My personal preference is to have a loading image displayed on every page in advance and then use jQuery to hide the image once the page has loaded. It's up to you whether you want to use $(document).ready or $(window).load.

// assumes you already have a DIV#preloader container on your page centered with a loading image inside 
// of it
$(document).ready(function() {
    $("#preloader").hide();
});

$(window).load(function() {
    $("#preloader").hide();
});