La charge d'image Jquery Ajax ne fonctionne que dans FF. Suspect "condition de course".

Question

J'ai fait une application web qui charge les images en utilisant jquery, ajax et json. Je l'ai eu pour fonctionner dans Firefox, mais hélas, Safari et Chrome restent têtus. Il s'agit d'une "condition de concurrence" où les images ne se chargent pas assez rapidement, donc j'ai un événement de chargement ainsi qu'un événement déclencheur à attendre que toutes les images soient chargées avant d'ajouter le html à un conteneur div .

Voici le lien vers la page qui fonctionne dans FF: http://chereecheree.com/dagworthy/style.html

Et un code: var aSectionImages = new Array;

//count how many images are in a section: 
var aImagesCount = new Array(); 

//count how many images of a particular section have been loaded 
var aImagesLoaded = new Array(); 

var htmlString; 
var jsonStyleImages = "images.json" 
var jsonNavImages = "imagesNav.json"; 

//container div: 
var scrollableArea = $("#scrollableArea"); 
$.getJSON(jsonNavImages, getNavIcons); 
$.getJSON(jsonStyleImages, makeScroller); 


//trigger this function on load event: 
function imageLoaded(oImg){ 
//get the name of the section of images: 
var locSectionId = (imageInSection(oImg.src)).replace(/\s|'/g, "_"); 

//get the file name of the current image 
var locFileName = getFileName(oImg.src); 
if (aImagesLoaded[locSectionId]===undefined){ 
    aImagesLoaded[locSectionId] = new Array; 
}; 

//check if it has already been loaded by seeing if it exists in the array of loaded images: 
var inArray = false; 
inArray = $.inArray(locFileName, aImagesLoaded[locSectionId]); 
if (inArray == -1) { 
    //array.push returns the new length of the array: 
    var tempLength = aImagesLoaded[locSectionId].push(locFileName); 
} 

    if (tempLength==aImagesCount[locSectionId]){ 
    htmlString += "</div>"; 
    scrollableArea.append(htmlString); 
    //after the html has been appended, force it to be 1000 px -- totally unstable hack. 
    scrollableArea.width(1000); 
} 
} 


//helper function to get section name of a loading image: 
function imageInSection(src){ 
var resultId=false; 
var locFileName = getFileName(src); 
for (var k = 0; k < aSectionImages.length; k++){ 
    for(var j=0; j < aSectionImages[k].images.length; j++){ 
    tempSrc = aSectionImages[k].images[j].src.split("/"); 
    tempFileName = tempSrc[tempSrc.length-1]; 
    if (tempFileName == locFileName) { 
    resultId = aSectionImages[k].id; 
    } 
    } 
} 
return resultId; 
} 

//helper function to get the file name of a loading image: 
function getFileName(href){ 
var resultFileName=false; 
var locSrc = href.split("/"); 
resultFileName = (locSrc[locSrc.length-1]); 
return resultFileName; 
} 

//function called when ajax request is successful -- it puts together the html string that will be appended to the containter div 
function makeScroller(data){ 
aSectionImages = data; 
for (ii=0; ii<aSectionImages.length; ii++){ 
    var locData = aSectionImages[ii]; 
    var locId = locData.id.replace(/\s|'/g, "_"); 
    aImagesCount[locId] = locData.images.length; 
    htmlString = "<div id=\"" + locId + "\">"; 
    for (jj=0; jj<locData.images.length; jj++){ 
    var oImage = new Image(); 
    var locImage = locData.images[jj]; 

    $(oImage) 
    .load(function(){ 
     imageLoaded(oImage); 
    }) 
    .attr("src", locData.images[jj].src); 

    if (oImage.complete && oImage.naturalWidth !== 0){ 
    $(oImage).trigger("load"); 
    } 

    //alert (oImage.width); 
    locImage.id ? locImage.id = " id=\""+locImage.id+"\" " : locImage.id = ""; 
    htmlString += "<img height=\"" + locImage.height + "\"" + " width=\"" + oImage.width + "\"" + locImage.id + " src=\"" + locImage.src + "\" />"; 
    }  
} 

} Mais il est probablement préférable de regarder en ligne, car il y a un plug-in qui est utilisé. De toute façon, le style calculé pour le conteneur div apparaît parfois à "0px", ce qui explique pourquoi je le force à "1000px" mais ce hack n'est pas très stable.

Toutes les idées seraient grandement appréciées. Merci! --Daniel.

Answer 1

Dans cette section:

$(oImage) 
.load(function(){ 
    imageLoaded(oImage); 
}) 
.attr("src", locData.images[jj].src); 

if (oImage.complete && oImage.naturalWidth !== 0){ 
$(oImage).trigger("load"); 
} 

image.naturalWidth n'est pas disponible dans tous les navigateurs (si undefined !== 0 ne sera pas un chèque correct), mais vous n'avez pas besoin de l'utiliser, réorganiser tout le code , comme ceci:

$(oImage).one('load', function(){ imageLoaded(this); }) 
     .attr("src", locData.images[jj].src) 
     .each(function() { 
      if (this.complete) $(this).trigger("load"); 
     }); 

il utilise .each() en boucle par après avoir réglé le src et déclenche l'événement load au cas où il est venu de cache (this.complete être instantanément tr ue indique ceci). L'appel .one() garantit que l'événement load se déclenche une seule fois, que ce soit à partir du cache ou d'une charge normale.