knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

画像の読み込みに失敗したら

IE8以下のみで失敗する場合

IE8以下は、すでにブラウザがキャッシュをしている場合、onloadメソッドが走りません。(最新のブラウザではキャッシュをしていても走ります)

var img = new Image();
img.src = hoge.jpg';
img.onload = function(){
    //IE8以下ではキャッシュしているとここに到達しません
}

そんなときは、以前iframeに関する記事でも書きましたが、重複しない値をパスに付加しましょう。

UNIX時間なら間違いなく重複しません。 以下はDateオブジェクトのgetTimeメソッドで、現在のUNIX時間を取得しています。

var img = new Image();
img.src = hoge.jpg' + "?" + new Date().getTime();
img.onload = function(){
    //パラメータを追加すればここに到達します
}

画像自体が存在しない場合

これは全ブラウザに共通しています。

存在しない画像のパスを指定してしまったら、もちろんロードはできません。

もし万が一、画像の場所が移動してしまったとき、onloadメソッドは走りません。

プリロードなど、次々にImageオブジェクトを作らなければいけないときは、画像のパスが存在しなかった時点で止まってしまいます。

そんなときはonerrorで保険をかけます。

var img = new Image();
img.src = hogehoge.jpg' + "?" + new Date().getTime();
img.onload = function(){
    //本来の処理
}
img.onerror = function(){
    //保険の処理
}