1

I have lots of ASP.NET Pages in which all the contents of the page has been placed inside Content Panel on each page..They takes some time to load fully when requested. Now I want to show a GIF image and that Page remains un-editable until it loads Fully using JQuery.. Please don't give examples using div tag as I m dealing with content panel. Any Ideas??

Vedpathi
  • 55
  • 1
  • 8
  • 1
    Refer this link: http://stackoverflow.com/questions/1853662/how-to-show-page-loading-image-div-text-until-the-page-has-finished-loading-rend – Ayyappan Sekaran May 03 '13 at 12:00

2 Answers2

2

Something along the lines of:

// once the DOM is ready
$(function(){
    // show #yourWrapper with loader img
});

// once all is loaded
$(window).load(function(){
    // hide #yourWrapper
});

The loader img can be a div/asp:panel with CSS style. Important to this setup as well is the height 100% on the html, body element.

html, body { height: 100%; }
#yourWrapper { height: 100%; background: url("../art/loader.png") no-repeat scroll 50% 50% transparent; overflow: hidden; }
Tim Vermaelen
  • 6,869
  • 1
  • 25
  • 39
  • It means $(window).load(function(){});ensures the loading of whole page successfully and there after u can hide ur image?? – Vedpathi May 03 '13 at 11:58
  • yes, that's correct. If you check the NET tab in Firebug for example you'll be looking at the red and blue line of files that are loaded. – Tim Vermaelen May 03 '13 at 12:02
0

You should take a look at jQuery's load().

Something like this:

<!DOCTYPE html>
<html>
<body>
<img src="loader.gif" id="loader">
<script src="path/to/jQuery.js"></script>
<script>
$(document).ready(function(){
    $('#loader').load('some/url.html');
})
</script>
</body>
</html>
codingjoe
  • 1,210
  • 15
  • 32