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」にしますが、そのハックはあまり安定していません。

任意のアイデアをいただければ幸いです。ありがとう！-ダニエル。

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をトリガーします（即座にtrueであることがこれを示します）。この呼び出しにより、キャッシュからであろうと通常のロードからであろうと、イベントが1回だけ発生することが保証されます。loadthis.complete.one()load

于 2010-07-07T01:47:14.100 に答える