как показать div # loading, пока div #content загружает

я хочу реализовать решение, в котором:

пока содержимое в div #content загружается,скрыть div #content,покажи div #loading,затем, когда загружен div #content,скрыть div # loading,исчезнуть в div #content

я пытался:

HTML:

<div id="content">
<!--this stuff takes a long time to load-->
<img src="http://lorempixel.com/1920/1920/">
</div>
<div id="loading">
<!-- this is the loading gif -->
<img src="http://lorempixel.com/400/200/">
</div>

ЯШ:

// when user browses to page
$('#content').hide();
$('#loading').show();

// then when div #content has loaded, hide div #loading and fade in div #content
$('#content').bind('load', function() {
$('#loading').hide();
$('#content').fadeIn('slow');
});

вот jsfiddle, над которым я работаю:

http://jsfiddle.net/rwone/Y9CQ4/

благодарю вас.

Ответы на вопрос(3)

Ваш ответ на вопрос