SOFTELメモ

Softel Inc.

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

問題

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

image

答え

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

//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);

関連するメモ

コメント