Javascript pour charger l'image du serveur asynchrone

Question

Je veux charger des images de mon serveur à une galerie d'image. Le problème est qu'après avoir chargé la page web, mon programme charge d'abord toutes les images et les affiche toutes en même temps. En conséquence, il y a une attente importante pour le chargement.

Je voudrais afficher les images une à la fois pendant le chargement, en affichant un indicateur «occupé» sur les images qui n'ont pas encore été chargées.

Voici mon code:

controller.labelForIndex = function (index) { 
    var arrayIndexNO=(index%(temp.length/2))*2; 
    var appID=temp[arrayIndexNO]; 
    var iconImage=appID+".png"; 

    $(".ad-carousel-view .cells > li").css("background-image", "url("+iconImage+")"); 

    return temp[arrayIndexNO+1]; 
}; 

Cette fonction est appelée 10 fois pour charger 10 PNGs et les afficher dans une cellule, mais mes charges de code toutes les images d'abord, puis les affiche en même temps.

Answer 1

How to load images with jquery ajax? (From jQuery mailing list):

Vous ne pouvez pas charger des images avec AJAX il suffit de créer un nouvel objet d'image et append, l'image peut charger asyncronously. Essayez ce simple plugin jQuery :

$.fn.image = function(src, f){ 
    return this.each(function(){ 
     var i = new Image(); 
     i.src = "">  i.>  this.appendChild(i); 
    }); 
} 

appellent ensuite ce plugin comme:

$("#container").image(" http://jquery.com/images/hat2.gif",function(){ 
    alert("The image is loaded now"); 
});