Chargement asynchrone d'images avec JavaScript

Question

Existe-t-il une méthode pour afficher une image de chargement pour les images dynamiques générées à l'aide de Flickr? J'ai trouvé un moyen de le faire comme indiqué sur le site Wacom Community mais je n'ai pas réussi à le faire fonctionner. Y at-il quelque chose de plus simple ou quelqu'un a-t-il une meilleure explication que l'auteur de la technique de http://blog.realmofzod.com/asynchronous-image-loading-with-jquery/?

Answer 1

Je viens de commencer à travailler. YMMV:

<img src="images/blank.gif" onload="replaceImage(this, 'flickrthumbnailimageurl')" 
width="75" height="75" /> 

Et puis replaceImage:

function replaceImage(img, replacementImage) 
{ 
    img.onload = null; 
    img.src = replacementImage; 
} 

blank.gif est juste un solide pixel 1x1 image grise. Fondamentalement, l'idée est que cette image vide est chargée et étendue à 75x75 (pour préserver la mise en page). Cela déclenche presque immédiatement le gestionnaire de chargement, qui modifie la source de l'image à l'image souhaitée. Cela a l'effet que vous désirez.

Answer 2

pourrait le faire avec jquery:

<img src="http://myimages.com/loaderImage.jpg" id="imgIdLoading" /> 
<img src="http://flickr.com/image.jpg" id="imgId" style="display:none;" /> 

$('#imgId').load(function(){ 
    // ... loaded 
    $('#imgIdLoading').remove(); 
    $('#imgId').show(); 
}).error(function(){ 
    // ... not loaded 
    $(this).attr('src','/whatever/error.png'); 
});