0

我制作了一个使用 jquery、ajax 和 json 加载图像的网络应用程序。我让它在 Firefox 中工作，但是 Safari 和 Chrome 仍然很顽固。

它与图像加载速度不够快的“竞争条件”有关，因此我有一个加载事件和一个触发事件，等待所有图像都加载完毕，然后再将 html 附加到容器 div。

这是在 FF 中工作的页面的链接：http: //chereecheree.com/dagworthy/style.html

还有一些代码： 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 + "\" />";
   }       
 }

} 但最好在网上看一下，因为有一个插件使用。无论如何，容器 div 的计算样式有时会显示为“0px”，这就是为什么我将其强制为“1000px”，但该 hack 不是很稳定。

任何想法将不胜感激。谢谢！——丹尼尔。

4

1 回答 1

0

在这个部分：

$(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立即为真表示这一点）。该.one()调用确保load事件仅触发一次，无论是来自缓存还是正常加载。

于 2010-07-07T01:47:14.100 回答