Jquery Ajax圖像加載僅適用於FF。懷疑「競賽狀況」。

Question

我做了一個web應用程序，使用jquery，ajax和json加載圖像。我在Firefox中使用它，但唉，Safari和Chrome仍然固執。

它與圖像加載速度不夠快的「競態條件」有關，所以我有一個加載事件以及一個觸發事件，等待所有圖像加載後再將html附加到容器div 。

這裏是鏈接到在FF作品頁面： http://chereecheree.com/dagworthy/style.html

而且一些代碼： VAR aSectionImages =新的陣列;

//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 + "\" />"; 
    }  
} 

} 但它可能是最好看它在網上，因爲是所使用的插件。 無論如何，容器div的計算樣式有時顯示爲「0px」，這就是爲什麼我強制它爲「1000px」但該黑客不是很穩定。

任何想法將不勝感激。 謝謝！ - 丹尼爾。

Answer 1

在本節：

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

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

image.naturalWidth是不是所有瀏覽器（這樣undefined !== 0將不會是一個正確的檢查），但你並不需要它來使用它，只是重新排列碼，像這樣：

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

這使用.each()遍歷設置src後觸發load事件的情況下，它來自高速緩存（this.complete是瞬間TR你表明這一點）。調用.one()可確保load事件僅從緩存或正常負載觸發一次。