0

Using following code to show loading animation (and hide whole page loading process with it) if js enabled

<script>
document.getElementsByTagName('body')[0].innerHTML = '<div id="loading"><img src="core/design/img/load/load.gif" /></div>';
</script>

And fading out with following code

$(window).load(function(){
$('#loading').fadeOut(600); 
});

But the loading div appears only after big delay:when whole page loaded it appears for 1-2 seconds. How -to fix hat problem? The loading div must appear at first

here is the page that i'm talking about http://aquastyle.az/?lang=en

Tural Ali
  • 22,202
  • 18
  • 80
  • 129
  • Duplicate question: http://stackoverflow.com/questions/7578047/how-to-show-loading-animation-if-browser-supports-js – Paul Sep 28 '11 at 05:06

2 Answers2

1

try to change 

<script>
document.getElementsByTagName('body')[0].innerHTML = '<div id="loading"><img src="core/design/img/load/load.gif" /></div>';
</script>

to

<script>
  $(function(){
    $(document.body).html('<div id="loading"><img src="core/design/img/load/load.gif" /></div>');
  });
</script>

and see if that doesn't work better for you.

Martin Jespersen
  • 25,743
  • 8
  • 56
  • 68
  • Using above example because i need to load jquery library for your example. And it will extra time. Please pay attention to my question. The problem is delay before loading appears – Tural Ali Sep 28 '11 at 10:53
  • If you use a CDN-hosted version of jQuery, chances are your users will already have it in their browser cache. On the otehr hand, if you don't wish to use jQuery, you can easily roll-your-own document ready code - just look inside the jQuery source and see how it's implemented... it's quite easy - the point of my example is to use dom-ready. – Martin Jespersen Sep 28 '11 at 10:57
0

Try one thing
Make that loader div visible at start

style="display:block;"
and after page load make it disappear 

$(document).load(function(){ $("#loaderdiv").css("display","none") })
Wazy
  • 8,822
  • 10
  • 53
  • 98