複数のイメージを検出するロードイベント

Question

複数のイメージのロードイベントを検出する方法があるのでしょうか（特に、特定のセットの最後のイメージのロードが完了した時点で関数を実行する必要があります）。

たとえば、ユーザーがリンクをクリックすると、lighboxが10個の画像で表示されます。すべての画像がロードされると、ローディングバーが消えます。

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

これは、残念ながら、あまりにも早く（1つのイメージのロードが完了した後に）hideLoadingBar();をトリガします。

P.S.
画像がキャッシュされた後に私の機能が必要になります。jQuery('#img1, #img2').load();は機能しません。

Answer 1

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

Answer 2

誰も良いアイデアがないようですので、私の解決策/回避策は次のとおりです。この質問あなたはそれがそのために特別に作成したライブラリだが、ここで、それは短く、シンプルだから私が使用するつもりなソリューションですので、使用したいものはおそらくあるに他の答え：キャッシュされたイメージのため

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(); 
     } 
    }); 
}); 

作品とキャッシュされたイメージではありません。