cómo mostrar div # cargando mientras div # contenido contenido
Estoy deseando implementar una solución donde:
mientras que los contenidos en div #content se están cargando,ocultar div #contenido,mostrar div # cargando,luego, cuando se ha cargado el div #content,ocultar div # cargando,desvanecerse en div #contenidoYo he tratado:
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>
js
// 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');
});
Aquí está el jsfiddle en el que estoy trabajando:
http://jsfiddle.net/rwone/Y9CQ4/
gracias.