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?

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?

• javascript
• jquery
• loading
• fadein

4 Answers 4

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

Your code won't "load" the image. All it does is add the image tag to the DOM. The browser will try to add the image once the tag is added to the DOM.

Your best bet is to add the image to the HTML code and hide it with css. Then use jQuery's show function to show it rather than try to load the image.

An alternative would be to "preload" the image with javascript, but I don't see how that would be more efficient.

You could bind a handler to the load event on the #loaded div:

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

See http://api.jquery./load-event/

I am a little confused by all these answers and not sure what your question is or if I am right or they are right, but this is how to wait 4 seconds. (added 2 lines to your original code)

<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"/>');
    setTimeout(function () {
      $('#loaded').fadeIn(1500);
      $('#load').fadeOut(2000);
    }, 4000)
  });
</script>