JQueryで画像をロードするのを待っています

Question

画像のロードが完了するのを待っていますが、ロードイベントが決して一致しないようです。ここで

は私のコードです：

$(function() { 
var arrowWidth = 22; 
var currentImageID = -1; 
var imageOffsets = new Array(); 
var loadedImages = 0; 
var numberOfImages = $("div#sliderGallery > ul > li").size(); 

$("div#sliderGallery > ul").hide(); 
$("div#sliderGallery").append("<div id=\"loading\"></div>"); 
$("div#sliderGallery > div#loading").append("Chargement en cours ...<br>"); 
$("div#sliderGallery > div#loading").append("<img src=\"progressbar.gif\" />"); 

function setOffset(imageID) { 
    if (imageID != currentImageID) { 
     $("ul#slide_items > li > img#"+currentImageID).fadeTo(0, 0.2); 
     currentImageID = imageID; 
     $("ul#slide_items > li > img#"+currentImageID).fadeTo("slow", 1); 
     $("div#sliderGallery > ul").css("left", imageOffsets[imageID][0]+"px"); 
     $("div#slideGallery > span.arrow").css("width", imageOffsets[imageID][1]+"px"); 
     $("div#sliderGallery > span#left").css("left", imageOffsets[imageID][2]+"px"); 
     $("div#sliderGallery > span#right").css("left", imageOffsets[imageID][3]+"px"); 
    } 
} 


$("div#sliderGallery > ul > li > img").load(function() { 
    alert("never executed ..."); 

    loadedImages++; 
    if (loadedImages == numberOfImages) { 
     $("div#sliderGallery > div#loading").remove(); 
     $("div#sliderGallery").css("overflow", "hidden"); 
     $("div#sliderGallery > ul").show(); 
     $("div#sliderGallery").append("<span id=\"left\" class=\"arrow\"><img src=\"arrow_left.png\" /></span>"); 
     $("div#sliderGallery").append("<span id=\"right\" class=\"arrow\"><img src=\"arrow_right.png\" /></span>"); 
     $("div#slideGallery > span.arrow").fadeTo(0, 0.5); 
     $("div#slideGallery > span.arrow").css("padding-top", Math.round((600-146)/2)+"px"); 

     var ulWidth = $("div#sliderGallery").innerWidth(); 

     var imageID = 0; 
     var imageWidthSum = 0; 
     $("div#sliderGallery > ul > li > img").each(function() { 
      image = jQuery(this); 
      image.attr("id", imageID); 
      image.fadeTo(0, 0.2); 

      imageOffsets[imageID] = new Array(); 
      // Offset applied to images 
      imageOffsets[imageID][0] = Math.round(ulWidth/2-(imageWidthSum+image.innerWidth()/2)); 
      // Width applied to span 
      imageOffsets[imageID][1] = Math.round(image.innerWidth()/2+arrowWidth); 
      // Offset apply to the left span 
      imageOffsets[imageID][2] = Math.round($("div#sliderGallery").offset().left+ulWidth/2-imageOffsets[imageID][1]); 
      // Offset apply to the right span 
      imageOffsets[imageID][3] = imageOffsets[imageID][1]+imageOffsets[imageID][2]; 

      imageID++; 
      imageWidthSum += image.innerWidth(); 
     }); 

     setOffset(0); 
    } 
}); 

}）;

HTMLコード： link text

なぜこの行 "警告（" 実行されたことがありません... "）;"実行されていませんか？事前に

おかげで、私はこの問題に非常識つもりです:)

Answer 1

IEでは、イベントのオンロードに問題があるようです。 attach onloadイベントハンドラのほかに、各画像について、属性completeがtrueと等しいかどうかを確認することができます。

$("div#sliderGallery > ul > li > img").each(function() { 
    if ($(this)[0].complete) { 
     // track image is loaded 
    } 
}); 

これはキャッシュされたイメージでも機能します。

Answer 2

これはあなたの問題への答えではないかもしれないが、私はあなたがDIV＃slideGalleryとのdiv＃のsliderGalleryを参照気づきます。これらの2つの別個の部門か、それともタイプミスですか？

は私がdocsからIE 8

Answer 3

と警告ボックスを受信します。

注：要素が完全に ロードされたその前にあなたがした後、それを設定する場合は、 を設定した場合、負荷のみ動作しますその 何も起こりません。これは がロードされた後に を設定したときに、 が$（document）.ready（）内で発生することはありません。 jQueryはこれを期待通りに処理します。

$（document）.ready（）に入れることができますか？

Answer 4

numberOfImagesを$（ "div＃sliderGallery> ul> li> img"）と比較することで、すべての画像が既に読み込まれているかどうかをチェックする必要があります。 onloadハンドラ。ほとんどのブラウザは、ハンドラが登録された後に画像のロードが完了した場合にのみイベントを発生させます。以前はロードが完了していても起動しますが、それには依存しません。あなたは通常$（document）.ready（）でこのような初期化を行うので、おそらく前に読み込まれたイメージの量が多いので、その問題にさらに巻き込まれます。

並行処理の理由から、プリロードが完了した場合、またはブロックを複数回実行した場合に実行されるように、ブロックを起動する（よりうまく機能させる）ときには、ブールフラグをトグルしてチェックすることもできます。

また、内部のloadedImagesカウンタを使用しないようにしてください。これは、上記の理由で完全な値にカウントされない可能性があるからです。毎回、$（ "div＃sliderGallery> ul> li> img"）の長さをチェックしてください。

jQueryの$（）で登録したプリローダーをコーディングしたときに、関連性があるかどうかわかりません。多分、そこに何らかの問題があったかもしれないし、$（）がわからなかったかもしれません。何か違いがあれば試してみてください。

Answer 5

子孫画像のダウンロードが終了したときにコールバックを発生させるプラグインを作成しました。ローカライズされたwindow.onloadの並べ替え。

それはwaitForImagesと呼ばれていますし、使い方は...

$('selector').waitForImages(function() { 

    alert('All images are loaded.'); 

}); 

Readme。

CSSで参照されている画像の場合は、をに設定することもできます。