1

最後の画像が読み込まれたとき、または最後の画像が読み込まれたときにエラーが発生した場合にイベントをトリガーする単純な html があります。ここに私のコードがあります

html

<div id="compare-table-scrollable">
    <img src="www.bla.com/1.png" />
    <img src="www.bla.com/2.png" />
    <img src="www.bla.com/3.png" />
</div>

Jクエリ

var imageCount = $('#compare-table-scrollable img').length;
var counterIMG = 0;
$('#compare-table-scrollable img').one("load error",function(){
           counterIMG++;
           if (counterIMG == imageCount)  // do stuff when all have loaded
           {
                alert(counterIMG);
           }
});

これが私のフィドルです

4

2 に答える 2

2

これは私が少し前に自分で書いたものです。上記のものと非常に似ていますが、もう少し堅牢です...

function onImagesLoaded($container, callback) {
    var $images = $container.find("img");
    var imgCount = $images.length;
    if (!imgCount) {
        callback();
    } else {
        $("img", $container).each(function () {
            $(this).one("load error", function () {
                imgCount--;
                if (imgCount == 0) {
                    callback();
                }
            });
            if (this.complete) $(this).load();
        });
    }
}

で、使い方は…

onImagesLoaded($("#compare-table-scrollable"), function() {
    alert("images loaded");
});

が追加されていることに注意してくださいif (this.complete)。これにより、関数はキャッシュされた画像をカウントできるため、関数が呼び出される前にロードされます。

于 2013-09-30T15:59:18.953 に答える
0

イベントが既に発生した後、ページの読み込みプロセスの非常に遅い段階まで、イベントをフックしていません。jsFiddle の左上にある 2 番目のドロップダウン ボックスに「onload」と表示されていることに注意してください。これは jsFiddle の非常に驚くべきデフォルトであり、JavaScript コードをwindow loadイベント ハンドラーでラップします。そのハンドラーは、すべての画像が読み込まれるか、読み込みに失敗するまで起動されません。

そのドロップダウンを に変更するとno wrap - <body>、アラートが表示されます: http://jsfiddle.net/X4AmG/3/

とはいえ、マークアップで指定されている画像では、コードがハンドラーを接続する前にloadorイベントが発生するのではないかと心配です。そのため、代わりに次のようなerrorことをするでしょう。

// Get the images
var imgs = $('#compare-table-scrollable img');

// Schedule the first check for DOM ready
$(checkForImagesDone);

// Our check function
function checkForImagesDone()
{
  var counter = 0;
  imgs.each(function()
  {
    if (this.complete)
    {
      ++counter;
    }
  });
  if (counter === imgs.length)
  {
    alert("All complete");
  }
  else
  {
    setTimeout(checkForImagesDone, 50); // 50ms
  }
}
于 2013-09-30T15:53:49.193 に答える