0

私には独特の問題があります。多数の画像の src、幅、高さを含む JSON ファイルを読み込んでいます。

それらをスムーズスクリプトjqueryプラグインにロードして、画像を自動的にスクロールさせようとしています。

「表示領域」の div は、3 つの画像を並べて表示できます。

ページを最初に読み込むと、最初の画像のみが表示されます。再読み込みすると、最初の 3 つの画像が表示され、残り (合計 11 個) が読み込まれますが、プラグインはスクロールしないため、それらを見ることができません。

$(window).one 関数に alert("whatever") 行を挿入すると、すべて正常に動作します。

画像がロードされたときと .load イベントがトリガーされたときに何か関係があるのではないかと思います。

JSON ファイルを解析し、スクロール可能な div に追加される HTML 文字列を作成するコードを次に示します。

var aSectionImages = new Array;
var aImagesCount = new Array();
var aImagesLoaded = new Array();
var htmlString;
var jsonStyleImages = "images.json"
 var jsonNavImages = "imagesNav.json";
var scrollableArea = $("#scrollableArea");
$.getJSON(jsonNavImages, getNavIcons);
$.getJSON(jsonStyleImages, makeScroller);

function imageLoaded(imgSrc){
 var locId = (imageInSection(imgSrc)).replace(/\s|'/g, "_");
 if (aImagesLoaded[locId]===undefined){
  aImagesLoaded[locId] = 0;
 };     
 aImagesLoaded[locId] = aImagesLoaded[locId]+1;
 if (aImagesLoaded[locId]==aImagesCount[locId]){
  //alert("section" + locId);
  //$("#loaded").html(locId);
  //aSectionLoaded = {locId:"loaded"};

  //in theory, wait until all images in a section are loaded before
  //appending the HTML to the div:
  scrollableArea.append(htmlString);
 }
}

function imageInSection(src){
 var resultId=false;
 var locSrc = src.split("/");
 var locFileName = (locSrc[locSrc.length-1]);
 for (i = 0; i < aSectionImages.length; i++){
   for(j=0; j < aSectionImages[i].images.length; j++){
    tempSrc = aSectionImages[i].images[j].src.split("/");
    tempFileName = tempSrc[tempSrc.length-1];
    if (tempFileName == locFileName) {
     resultId = aSectionImages[i].id;
    }
   }
 }
 return resultId;
}

function makeScroller(data){
 aSectionImages = data;
 for (i=0; i<aSectionImages.length;i++){
  locData = aSectionImages[i];
  locId = locData.id.replace(/\s|'/g, "_");
  aImagesCount[locId] = locData.images.length;
  htmlString = "<div id=\"" + locId + "\">";

   for (j=0; j<locData.images.length; j++){
    oImage = new Image();
    $(oImage)
     .load(function(){
      imageLoaded(this.src);
    })
     .attr("src", locData.images[j].src);

     if (oImage.complete && oImage.naturalWidth !== 0){
     $(this).trigger("load");
     //$("#trigger").html(locData.images[j].src);
     //return false;
     }
    locImage = locData.images[j];
    locImage.id ? locImage.id = " id=\""+locImage.id+"\" " : locImage.id = "";
    htmlString += "<img height=\"" + locImage.height + "\"" + " width=\"" + locImage.width + "\"" + locImage.id + " src=\"" + locImage.src + "\" />";
   }       
 }

}

以下は、読み込まれた画像の表示を処理するプラグインの一部です。

// ロード時に 1 回だけ行うこと $(window).one("load",function(){ //alert("ここにアラートを含めると機能するのはなぜですか?");

// If the content of the scrolling area is not loaded through ajax,
// we assume it's already there and can run the code to calculate
// the width of the scrolling area, resize it to that width
if(options.ajaxContentURL.length === 0) {
 $mom.scrollableAreaWidth = 0;
 $mom.tempStartingPosition = 0;

 $mom.find(options.scrollableArea).children().find("img").each(function() {

  // Check to see if the current element in the loop is the one where the scrolling should start
  if( (options.startAtElementId.length !== 0) && (($(this).attr("id")) == options.startAtElementId) ) {
  $mom.tempStartingPosition = $mom.scrollableAreaWidth;
  }

  // Add the width of the current element in the loop to the total width
  $mom.scrollableAreaWidth = $mom.scrollableAreaWidth + $(this).outerWidth(true);
 });

 // Set the width of the scrollableArea to the accumulated width
 $mom.find(options.scrollableArea).css("width", $mom.scrollableAreaWidth + "px");

 // Check to see if the whole thing should be hidden at start
 if(options.hiddenOnStart) {
  $mom.hide();
 }
}

// Set the starting position of the scrollable area. If no startAtElementId is set, the starting position
// will be the default value (zero)
$mom.find(options.scrollWrapper).scrollLeft($mom.tempStartingPosition);

// If the user has set the option autoScroll, the scollable area will
// start scrolling automatically
if(options.autoScroll !== "") {
 $mom.autoScrollInterval = setInterval(autoScroll, $mom.autoScrollDelay);
}

// If autoScroll is set to always, the hot spots should be disabled
if(options.autoScroll == "always")
{
 hideLeftHotSpot();
 hideRightHotSpot();
}

// If the user wants to have visible hot spots, here is where it's taken care of
switch(options.visibleHotSpots)
{
 case "always":
  makeHotSpotBackgroundsVisible();
  break;
 case "onstart":
  makeHotSpotBackgroundsVisible();
  $mom.hideHotSpotBackgroundsInterval = setInterval(hideHotSpotBackgrounds, (options.hotSpotsVisibleTime * 1000));
  break;
 default:
  break; 
}

});

完全なコードは http://chereecheree.com/dagworthy/style.htmlにあります。

ページをリロードすると期待どおりに動作することに気付くでしょうが、1 つ上のレベル (dagwothy/) からリンクをたどると、ロード時にアラート ステートメントがスローされない限り、最初の画像のみがロードされます。

このたびはご検討いただきありがとうございます。――ダニエル。

4

1 に答える 1

3

あなたの問題はここにあると思います、または少なくとも私が最初に見たものです：

oImage = new Image();
$(oImage).load(function(){
  imageLoaded(this.src);
}).attr("src", locData.images[j].src);

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

このコンテキストthisではoImage( a にあるように.each()) ではなく、documentであるためload、間違った要素で を起動しています。代わりに$(oImage).trigger("load")orが必要です。$(oImage).load()

キャッシュから画像をロードするときにすべてのブラウザーがそれを起動するわけではないため、手動で起動しようとしているケースがload正しい考えです...適切な要素でイベントを起動する必要があるだけです。そうでない場合、この条件は決して真ではありません。これらの画像にはload、カウントをインクリメントするイベントがありませんでした:

if (aImagesLoaded[locId]==aImagesCount[locId]){

これalert()により、イメージをロードする時間が与えられるため、他の処理が続行される前にすべての準備が整います...それ自体がウィンドウ外にある競合状態をスローするため、それが発生した場合、通常は次のいずれかです a) 時間がなかったいくつかの依存関係がロードされます前、またはb）最初の1回のロード時間を与えることにより、一部のイベント順序が破棄されます...これは通常、ある程度aの部分でもあります。

于 2010-07-01T12:19:44.977 に答える