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

Question

A veces, las imágenes tardan en reproducirse 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?

Answer 1

se puede 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(); 
}); 

le asignará load caso a la imagen que se activa cuando la imagen se ha terminado de cargar. Antes de eso, puedes mostrar tu imagen de cargador.

Answer 2

Sólo añadir una imagen de fondo a todas las imágenes usando CSS:

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

Answer 3

que utilizan una técnica similar a lo que ha escrito @Sarfraz, pero en lugar de ocultar elementos, acabo de manipular la clase de la imagen que yo' m cargando

<style type="text/css"> 
.loading { background-image: url(loading.gif); } 
.loaderror { background-image: url(loaderror.gif); } 
</style> 
... 
<img id="image" class="loading" /> 
... 
<script type="text/javascript"> 
    var img = new Image(); 
    img.onload = function() { 
     i = document.getElementById('image'); 
     i.removeAttribute('class'); 
     i.src = img.src; 
    }; 
    img.onerror = function() { 
     document.getElementById('image').setAttribute('class', 'loaderror'); 
    }; 
    img.src = 'http://path/to/image.png'; 
</script> 

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

Answer 4

Utilice un constructor de javascript con una devolución de llamada que se activa cuando la imagen ha terminado de cargarse en segundo plano. Simplemente lo usé y funciona muy bien para mí en todos los navegadores. Aquí está el thread with the answer.

Answer 5

en vez de hacer este método citado de https://stackoverflow.com/a/4635440/3787376,

Usted puede 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(); 
}); 

Se asigna load caso a la imagen que se activa cuando la imagen tiene carga terminado . Antes de eso, puedes mostrar tu imagen de cargador.

puede utilizar una función jQuery diferente para hacer la carga de imágenes se desvanecen, entonces pueden ocultar:

// 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 estilo de la pantalla se ajusta a ninguno. " http://api.jquery.com/fadeOut/

O usted no podía usar la biblioteca jQuery porque ya existen métodos sencillos de JavaScript entre navegadores.