2

画像の読み込みが完了するのを待っていますが、読み込みイベントが一致しないようです。

これが私のコードです:

$(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コード： リンクテキスト

この行が「alert("決して実行されなかった...");」である理由 実行されませんか？

前もって感謝します、私はこの問題で気が狂います:)

4

5 に答える 5

6

子孫の画像のダウンロードが完了したときにコールバックを起動するプラグインを作成しました。ローカライズされwindow.onloadた .

それはwaitForImagesと呼ばれ、使い方は...

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

    alert('All images are loaded.');

});

お読みください。

CSS で参照される画像を待機するように構成することもできます。

于 2011-05-05T13:42:13.923 に答える
4

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

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

これは、キャッシュされた画像でも機能する場合があります。

于 2009-07-09T15:19:40.430 に答える
0

これはあなたの問題に対する答えではないかもしれませんが、div#slideGallery と div#sliderGallery を参照していることに気付きました。これら2つの別々のdivですか、それともタイプミスですか?

IE 8 でアラート ボックスを受け取ります

于 2009-07-08T15:32:24.583 に答える
0

ドキュメントから：

注: load は、要素が完全に読み込まれる前に設定した場合にのみ機能し、その後に設定しても何も起こりません。これは、$(document).ready() では発生しません。これは、DOM がロードされた後に設定する場合にも、jQuery が期待どおりに動作するように処理します。

$(document).ready() に入れることはできますか?

于 2009-07-08T18:17:01.773 に答える