Question

I have this javascript function.

<script type="text/javascript">
  $(document).ready(function () {
  $('#load').html('<img style="display:block; margin:10px auto;background-color: #EEE;" src="<?echo $site["url"];?>images/icons/loading.gif"/>');
  $('#loaded').fadeIn(1500);
     $('#load').fadeOut(2000);
  });
</script>

As you may see it simply runs a loading image for a tot of seconds, then shows the div and hide the loading image.
This is not good for me. I need a function that will work in this way. The logic of the code would be:

As soon as $('#load').html('<img style="display:block; margin:10px auto;background-color: #EEE;" src="<?echo $site["url"];?>images/icons/loading.gif"/>'); is running, then wait 4 seconds, and then show the #loaded DIV.

In this way the #loaded DIV will be fully loaded and it will work fine, since it is an heavy one.

In few words I must to be sure that #loaded has been fully loaded by the browser before showing it.
How can I create a function that will do that?

On document ready show the loading DIV. Then WAIT for 3-4 seconds, then make the loading disappear and the loaded DIV visible.

Is this possible?

Answer 1

make your fadein launch as a callback of your fadeout.

    $(document).ready(function() {
        $('#load')
          .html('<img style="display:block; margin:10px auto;background-color: #EEE;" src="<?echo $site["url"];?>images/icons/loading.gif"/>')
          .fadeOut(2000, function() {
                $('#loaded').fadeIn(1500);
           });
    });

But to do this properly i would add the #load div to the html, hide it via css. Then simply do the fadeOut on document.ready.

update.

Mixing the best of both Andrew and my answer, this should work flawlessly:

<div id="load" style="display:none">Loading, please wait</div>

$(document).ready(function() {
        $('#load').show();
    $('#loaded').load(function() {
        $('#load').fadeOut(500,function(){  $(this).fadeIn(500);});
    });
});