CODEWITHSUNDEEP
asp.netjavascript
NLV
NLV

Reputation: 21641

Display Loading Image before a page gets loaded completely

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

Upvotes: 0

Views: 4908

Answers (3)

Jacob Relkin
Jacob Relkin

Reputation: 163238

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'!!

Upvotes: 1

Corey Ballou
Corey Ballou

Reputation: 43457

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();
});

Upvotes: 1

romiem
romiem

Reputation: 8930

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");
});

Upvotes: 2

Related Questions