6

複数の画像の読み込みイベントを検出する方法があるかどうか疑問に思っています (特に、特定のセットの最後の画像の読み込みが完了したときに関数を実行する必要があります)。

たとえば、ユーザーがリンクをクリックすると、10 個の画像を含むライトボックスが表示されます。すべての画像が読み込まれると、読み込みバーが消えます。

jQuery(".lightbox-image").each(function(){
    var image = jQuery(this);
    jQuery('<img />').attr('src', image.attr('src')).load(function(){
        hideLoadingBar();
    });
});

残念ながら、これはトリガーhideLoadingBar();が早すぎます (1 つの画像の読み込みが完了した後)。

PS
また、画像がキャッシュされた後に機能する必要があるため、機能しjQuery('#img1, #img2').load();ません。

4

2 に答える 2

2

このjQuery imagesLoadedプラグインをチェックしてください。あなたのニーズに合っているはずです。

于 2013-04-13T15:36:37.717 に答える
2

まあ、誰も良い考えを持っていないようですので、以下は私の解決策/回避策です。この質問に対するもう1つの答えは、おそらくそのために特別に作成されたライブラリであるため、使用したいものですが、短くてシンプルなので、使用するソリューションを次に示します。

var allImages = jQuery(".lightbox-image").length;
var counter = 0;
jQuery(".lightbox-image").each(function(){
    var image = jQuery(this).find('.myimage');
    jQuery('<img />').attr('src', image.attr('src')).load(function(){
        counter++;
        if(counter >= allImages){
            hideLoadingBar();
        }
    });
});

キャッシュされた画像では機能しますが、キャッシュされた画像では機能しません。

于 2013-04-13T15:57:44.850 に答える