0

私は gallery-slider-script を作成しており、ギャラリーに追加する前にすべての画像をプリロードしようとしています。

私のデザインは次のことを行う必要があります。

  1. 画像をロードし、DOM の非表示の preloadContainer に追加します。

  2. 読み込みが成功した場合、すべての画像がプリロードされたかどうかを確認するコールバック関数を読み込みます ("noOfPreloadedImages++; if(noOfPreloadedImages == noOfImagesToLoad)...")。

  3. image-resource が利用できないために読み込みに失敗した場合は、error-callback-function を呼び出します。

これが私のコードの複雑な「完全な」バージョンです。

                $('<img />')
                .attr({'src': galleries[i].slides[j].imageUrl, 'id': 'galleryImg'+j})
                .on('load', checkPreloadComplete(i))
                .on('error', checkPreloadError(i, j))
                .attr({'src': galleries[i].slides[j].imageUrl, 'id': 'galleryImg'+j})
                .appendTo(preloadContainers[i])
                .wrap('<div id="slide'+j+'" class="slide" />');

ここでの問題は、エラー コールバックが常に呼び出されていることです。関数チェーンで遊んでみましたが、成功しませんでした。

したがって、画像リソースが利用可能かどうかに関係なく、常にエラーをスローする小さなテストコードを次に示します。

$(function() {

$(document).ready(function() {
    $("<img />")
    .attr({'src': 'http://www.google.de/images/srpr/logo11w.png'})
    .on('error', errorHandler())
    .appendTo('body');
});

function errorHandler() {
    console.log("Error loading image.");
};

});

ここに jsFiddle があります: http://jsfiddle.net/SvenS/FhYQ8/

私は何を間違っていますか？私の考えはどこが間違っていますか？

[編集]

わかりました、それは奇妙でした。いくつかの観察：

これは常にエラー/成功を引き起こします:

$(function() {

$(document).ready(function() {      
    var test = $("<img />").appendTo('body');
    test.on('error', errorHandler());
    test.on('load', successHandler());
    test.attr({'src': 'http://www.google.de/images/srpr/logo11w.png'});
});

function errorHandler() {
    console.log("Error loading image!");
};

function successHandler() {
    console.log("Image loaded successfully!");
}

});

しかし、奇妙なことに、これが機能します。

$(function() {

    $(document).ready(function() {          
        var test = $("<img />").appendTo('body');
        test.on('error', function(e) { errorHandler(); });
        test.on('load', function(e) { successHandler(); });
        test.attr({'src': 'http://www.google.de/images/srpr/logo11w.png'});
    });

    function errorHandler() {
        console.log("Error loading image!");
    };

    function successHandler() {
        console.log("Image loaded successfully!");
    }

});

理由がよくわかりません。もっと深い理解のある人が助けてくれるかもしれません...？

4

2 に答える 2

-1

完全に機能するイメージプリローダーモジュールを作成しました。従来の JavaScript を使用しているため、jQuery が読み込まれる前に画像のプリロードを開始できます。また、コールバックをトリガーし、必要に応じてコールバックを起動する前に jQuery がロードされるのを待ちます。確認して、使用する場合はお知らせください: http://test.neilgirardi.com/

上記の URL には、3.1MB 相当の画像をプリロードし、コールバックとして jQuery .cycle() スライドショーをトリガーするデモが含まれています。

于 2013-10-13T03:53:20.753 に答える