Cómo mostrar la imagen de carga mientras la imagen real está descargando

A veces, las imágenes tardan un tiempo en renderizarse en el navegador. Quiero mostrar una imagen ocupada mientras se está descargando la imagen real, y cuando se descarga la imagen, se elimina la imagen ocupada y se debe mostrar la imagen real. ¿Cómo puedo hacer esto con JQuery o cualquier javascript?

Puedes hacer algo como esto:

// show loading image $('#loader_img').show(); // main image loaded ? $('#main_img').on('load', function(){ // hide/remove the loading image $('#loader_img').hide(); }); 

Asigna evento de load a la imagen que se dispara cuando la imagen ha terminado de cargarse. Antes de eso, puedes mostrar tu imagen de cargador.

Solo agrega una imagen de fondo a todas las imágenes usando css:

 img { background: url('loading.gif') no-repeat; } 

Utilizo una técnica similar a la que publicó @Sarfraz, excepto que en lugar de ocultar elementos, simplemente manipulo la clase de la imagen que estoy cargando.

  ...  ...  

En mi caso, a veces las imágenes no se cargan, por lo que manejo el evento onerror para cambiar la clase de imagen, por lo que muestra una imagen de fondo de error (en lugar del icono de imagen rota del navegador).

En lugar de simplemente hacer este método citado de https://stackoverflow.com/a/4635440/3787376 ,

Puedes hacer algo como esto:

 // show loading image $('#loader_img').show(); // main image loaded ? $('#main_img').on('load', function(){ // hide/remove the loading image $('#loader_img').hide(); }); 

Asigna evento de load a la imagen que se dispara cuando la imagen ha terminado de cargarse. Antes de eso, puedes mostrar tu imagen de cargador.

puede usar una función jQuery diferente para hacer que la imagen de carga se desvanezca y luego se oculte:

 // Show the loading image. $('#loader_img').show(); // When main image loads: $('#main_img').on('load', function(){ // Fade out and hide the loading image. $('#loader_img').fadeOut(100); // Time in milliseconds. }); 

“Una vez que la opacidad llega a 0, la propiedad de estilo de visualización se establece en ninguna”. http://api.jquery.com/fadeOut/

O no podría usar la biblioteca de jQuery porque ya hay métodos de JavaScript entre navegadores simples.

Use un constructor de JavaScript con una callback que se active cuando la imagen haya terminado de cargarse en segundo plano. Simplemente lo usé y funciona muy bien para mí en todos los navegadores. Aquí está el hilo con la respuesta .