Is there any way to show a loading image (like ajax loading gif) when I load big content with a normal request?

Question

I have no ajax request, but a simple asp.net postback. And I have a large site with hundreds or thousands of elements. Because of that the page needs lets say 4-10 seconds until it has completly loaded and therefore the page is a white page and no element is displayed until it has been rendered. Maybe some elements are displayed, but the browser is still rendering.

Is there any chance without using ajax etc. to show a loading image? Internet explorer preferred.

_{(source: kuka-robotics.com)}

score 0 · Answer 1 · answered Feb 19 '13 at 10:03

Add this script to your code and call init() function on onload of body tag.

   <script type="text/javascript">
     var ld=(document.all);
      var ns4=document.layers;
     var ns6=document.getElementById&&!document.all;
     var ie4=document.all;
      if (ns4)
        ld=document.loading;
     else if (ns6)
        ld=document.getElementById("loading").style;
     else if (ie4)
        ld=document.all.loading.style;
      function init()
     {
     if(ns4){ld.visibility="hidden";}
     else if (ns6||ie4) ld.display="none";
     }
     </script>

And onload of body tag call Init();

<body style="background-color:#FFFFFF;" onLoad="init()">
<div id="loading" style="position:absolute; width:200px; height:163px; text-align:center;top:310px; left:487px;">
<img src="load.gif" border=0 /></div>

....

..
</body>

Let me know is it working for u or not.

All the best.

score 0 · Answer 2 · answered Feb 19 '13 at 10:04

You could create two containers:

a container with the loading image, visible from start and hidden on page load complete
a container with the content, hidden from start and made visible on page load complete

and you can use javascript to make the container visible on page load complete.

For example:

<div id="loading_container">
     <img src="http://www.kuka-robotics.com/res/icn/ajax_loader.gif" />
</div>
<div id="main_container" style="display:none">
     <!-- your content here -->
</div>
<script type="text/javascript">
      window.onload=function(){
         document.getElementById("loading_container").style.display = 'none';
         document.getElementById("main_container").style.display = 'block';
      };
</script>

Is there any way to show a loading image (like ajax loading gif) when I load big content with a normal request?

2 Answers2