l'image préchargement dans jquery

Question

j'ai ce code, mais je ne sais pas quoi faire ..

var toBeInsertedToAS = ""; 

for(j=1;j<=10;j++) 
{ 
    $('<img />') 
    .attr('src','imgUrl_'+j+'.png') 
    .load(function(){     
     toBeInsertedToAS += $(this).attr('src')+"|";       
    }); 
    theSetDataCount++; 
}  
alert(toBeInsertedToAS); 

je veux juste avoir cette sortie ..

imgUrl_1.png | imgUrl_2.png | imgUrl_3.png | etc ...

mais ce que je peux voir, après la boucle, il n'y a pas de sortie .. peut-être parce qu'il va alerter (toBeInsertedToAS) sans charger les images complètement .. Je veux juste complètement loa d les images d'abord avant d'exécuteront l'alerte ..

Answer 1

Vous pouvez réorganiser un peu, comme ceci:

var toBeInsertedToAS = [], theSetDataCount = 0; 

for(j=1;j<=10;j++) 
{ 
    $('<img />').one('load', function(){ 
       toBeInsertedToAS.push(this.src); 
       if(toBeInsertedToAS.length == theSetDataCount) 
        alert(toBeInsertedToAS.join('|')); 
       }).attr('src','imgUrl_'+j+'.png') 
       .each(function() { 
        if(this.complete) $(this).load(); 
       }); 
    theSetDataCount++; 
} 

You can test it here, cette démo charge des images de http://dummyimage.com/ comme source.

Le load event se produit lorsque l'image se charge, pas une chose synchrone, même si elle sera instantanée si elle provient du cache. De cache également ne déclenchera pas l'événement load dans certains navigateurs ... nous manipulons manuellement cela avec le .each() et le .one() assure qu'il s'exécute seulement une fois, n'affectant pas notre compte d'une manière amusante.

La clé ici est de déclencher le alert() (ou toute autre fonction) lorsque le dernier gestionnaire load s'exécute.