¿Cómo visualizo una animación gif para el usuario mientras se carga una imagen (en la web)?

Question

El problema: Tengo un conjunto de imágenes, cuando el usuario presiona en una de ellas, crece en un área de la página. El intercambio de las imágenes se realiza con la ayuda de js. T la imagen pesa aproximadamente 0.5M, por lo tanto, es necesario aproximadamente 3 segundos hasta que se muestre la imagen. Me gustaría presentar un tipo de animación mientras la imagen no se muestra. ¿Cómo puedo hacer esto con la ayuda de js?

Answer 1

Uso del load caso, algo así como:

$("img.something").click(function() { 
    $(".someDiv").html('<img src="loading.gif"/>'); 
    var $img = $('<img src="bigImage.jpeg" style="display:none"/>'); 
    $img.load(function() { 
     // once the loading has completed 
     $(".someDiv").html($(this)); 
     $(this).fadeIn("slow"); 
    }); 
}); 

Answer 2

Siempre hay la etiqueta "carpa" con un mensaje de "carga" que se apaga tan pronto como su imagen se cambia. Por supuesto, aun me habría downvote cualquier persona que aboga marquesina.

Answer 3

Insertar un elemento marcador de posición y adjuntar un proceso de carga de devolución de llamada al elemento <img>. Con jQuery,

var imageElem = $('<img />'), 
    placeholder = $('<div class="loading">Loading...</div>'); 

imageElem.attr('src', 'http://example.com/big_image.jpg'); 

$('#images').append(placeholder).append(imageElem); 
imageElem.hide().load(function() { 
    placeholder.remove(); 
    imageElem.fadeIn(); 
});