ロードされた画像のjQueryイベント

すべての画像がjQueryイベントを介して読み込まれたことを検出することは可能ですか？

理想的には、

$(document).idle(function()
{
}

または

$(document).contentLoaded(function()
{
}

しかし、私はそのようなことを見つけることができません。

私はこのようなイベントを添付することを考えました：

$(document).ready(function()
{
    var imageTotal = $('img').length;
    var imageCount = 0;        
    $('img').load(function(){if(++imageCount == imageTotal) doStuff();});
}

しかし、画像の読み込みに失敗すると、これは壊れますか？メソッドが適切なタイミングで呼び出されることが非常に重要です。

jQueryのドキュメントによると、画像でロードイベントを使用する場合、いくつかの注意点があります。別の回答で述べたように、ahpi.imgload.jsプラグインは壊れていますが、リンクされているPaul Irish gistは維持されていません。

Paul Irish氏によれば、画像読み込み完了イベントを検出するための正規プラグインは次の場所にあります。

https://github.com/desandro/imagesloaded

すべての画像ではなく特定の画像（たとえば、DOMの完了後に動的に置き換えた画像）をチェックする場合は、次のように使用できます。

$('#myImage').attr('src', 'image.jpg').on("load", function() {  
  alert('Image Loaded');  
});  

これを処理するために私のプラグインのwaitForImagesを使用できます...

$(document).waitForImages(function() {
   // Loaded.
});

これの利点は、1つの祖先要素にローカライズでき、オプションで CSSで参照されている画像を検出できることです。

これは氷山の一角にすぎませんが、より多くの機能についてはドキュメントを確認してください。

jQuery $（）。load（）をIMGイベントハンドラとして使用することは保証されていません。画像がキャッシュから読み込まれると、一部のブラウザはイベントを発生させない場合があります。Safariの（古い？）バージョンの場合、IMG要素のSRCプロパティを同じ値に変更しても、onloadイベントは発生しません。

-最新のjQueryの（1.4.xの）で認識されていることが表示されますhttp://api.jquery.com/load-event -引用します：

画像がブラウザのキャッシュから読み込まれると、読み込みイベントがトリガーされない可能性があります。この可能性を説明するために、画像の準備ができたときにすぐに起動する特別なロードイベントを使用できます。event.special.loadは現在プラグインとして利用できます。

この場合を認識するプラグインと、IMG要素のロード状態に関するIEの「complete」プロパティがあります。http： //github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

この回答に従って、オブジェクトのjQuery loadイベントをのwindow代わりに使用できますdocument：

jQuery(window).load(function() {
    console.log("page finished loading now.");
});

これは、ページ上のすべてのコンテンツが読み込まれた後にトリガーされます。これはjQuery(document).load(...)、DOMの読み込みが完了した後にトリガーされるものとは異なります。

imagesLoaded プラグインは、クロスブラウザソリューションが必要な場合に使用する方法です

 $("<img>", {src: 'image.jpg'}).imagesLoaded( function( $images, $proper, $broken ){
 if($broken.length > 0){
 //Error CallBack
 console.log('Error');
 }
 else{
 // Load CallBack
 console.log('Load');
 }
 });

IEの回避策だけが必要な場合は、これで十分です

 var img = $("<img>", {
    error: function() {console.log('error'); },
    load: function() {console.log('load');}
    });
  img.attr('src','image.jpg');

現時点ではahpi.imgload.jsプラグインに現在壊れているというメモがあり、代わりにこの要旨を試してください：https ://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58

同じ生成元の画像の場合、次を使用できます。

$.get('http://www.your_domain.com/image.jpg', imgLoaded);

function imgLoaded(){
    console.log(this, 'loaded');
}

多分このプラグインは役に立つかもしれません：http : //www.farinspace.com/jquery-image-preload-plugin/

  function CheckImageLoadingState()
  {
     var counter = 0;
     var length = 0;

     jQuery('#siteContent img').each(function() 
     {
        if(jQuery(this).attr('src').match(/(gif|png|jpg|jpeg)$/))
          length++;
     });

     jQuery('#siteContent img').each(function() 
     {  
        if(jQuery(this).attr('src').match(/(gif|png|jpg|jpeg)$/))
        {
           jQuery(this).load(function() 
           {
           }).each(function() {
              if(this.complete) jQuery(this).load();
            });
        }
        jQuery(this).load(function()
        {
           counter++;
           if(counter === length) 
           {  
              //function to call when all the images have been loaded
              DisplaySiteContent();
           }
        });
     });
  }

$( "img.photo" ).load(function() {

    $(".parrentDiv").css('height',$("img.photo").height());
    // very simple

}); 

独自のスクリプトを作成しました。これは、多くのプラグインがかなり肥大化していることがわかったためです。Mineは、各画像に高さ（ネイティブの画像の高さ）があるかどうかを確認します。これを$（window）.load（）関数と組み合わせて、キャッシュの問題を回避しました。

私はコードにかなり多くのコメントを付けたので、たとえそれを使用しなくても、見てみるのは興味深いでしょう。それは私にとって完璧に機能します。

さらに苦労せずに、ここにそれがあります：

imgLoad.jsスクリプト

すべての画像が読み込まれるのを待っています...
jfriend00の問題に対する答えがここにありますjquery：1つのコンテナーdivの画像が読み込まれたイベントをリッスンする方法は？..と "if（this.complete）"
すべてが読み込まれるのを待ち、一部はキャッシュにある可能性があります！..そして "error"イベントを追加しました... すべてのブラウザで堅牢です

$(function() { // Wait dom ready
    var $img = $('img'), // images collection
        totalImg = $img.length,
        waitImgDone = function() {
            totalImg--;
            if (!totalImg) {
                console.log($img.length+" image(s) chargée(s) !");
            }
        };
    $img.each(function() {
        if (this.complete) waitImgDone(); // already here..
        else $(this).load(waitImgDone).error(waitImgDone); // completed...
    });
});

デモ ： http //jsfiddle.net/molokoloco/NWjDb/

window.load = function(){}

すべてのブラウザで完全にサポートされており、すべての画像が完全に読み込まれるとイベントが発生します。

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload