【JavaScript】画像を読み込んだら何かする

Tweet

Category JavaScript 2013/04/01

問題

画像を読み込んだタイミングで処理をおこないたい。

答え

画像の読み込みが完了したら何らかの処理をしたいときは、こんな感じで。

//img要素を作る
var $img = $('<img>');
//srcを指定
$img.attr('src', '画像のURL');
//画像読み込み後の処理を登録
$img.on('load', function(){alert('画像を読み込んだ！');});
//画像を表示する
$('#どこか').append($img);

なお、キャッシュを使用した場合などは画像読み込み完了のイベントが発生しない環境があるなどの問題があるので、画像のURLにタイムスタンプなどを付けて、常に読み込みが発生するようにするのもよいでしょう。

//img要素を作る
var $img = $('<img>');
//srcを指定（タイムスタンプつき）
$img.attr('src', '画像のURL?' + (new Date().getTime()));
//画像読み込み後の処理を登録
$img.on('load', function(){alert('画像を読み込んだ！');});
//画像を表示する
$('#どこか').append($img);