Posted at

イメージが読み込み完了した時点のイベントを取得

More than 3 years have passed since last update.

bindを使う。

ここでは、ページ内のすべての画像が読み込まれてから処理を行うよう、全体からimg要素の個数を取得後、ループで各img要素のloadをbindし、完了した個数カウントと全体の個数カウントがイコールになったときに、処理が実行するようにしている。


サンプルコード

<!doctype html>

<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>read image</title>
</head>
<body>

<img src="http://f.st-hatena.com/images/fotolife/B/Borom/20140927/20140927211300.jpg" class="image-ready">
<img src="http://f.st-hatena.com/images/fotolife/B/Borom/20140923/20140923183229.jpg" class="image-ready">
<img src="https://farm4.staticflickr.com/3912/15367877245_53d357d69b_o_d.jpg" class="image-ready">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="imageevent.js"></script>
</body>
</html>


imageevent.js

$(function(){

var allImage = $("img");
var allImageCount = allImage.length;
var completeImageCount = 0;

for(var i = 0; i < allImageCount; i++){
$(allImage[i]).bind("load", function(){
completeImageCount ++;
if (allImageCount == completeImageCount){
// 処理
alert('ready!');
}
});
}
});



参考