イメージがjQueryで読み込まれているかどうかを確認するには？

Question

私は自分のページに基本的なイメージ要素を持っています。私は自分のコンソールにメッセージを記録するロードイベントをキャプチャしています。

$("#myImg").on('load', function() { 
    console.log("Loaded"); 
}); 

既にロードされている画像は、その場合にはメッセージが全くロードされていない、ユーザー・キャッシュ内に存在しない限り、上記のコードは、完全に正常に動作します。

loadedのようなイベントがあり、画像が既に読み込まれているかどうかを確認できますか？

Answer 1

を確認する前に、loadイベント。 completeは画像オブジェクトのプロパティです。

HTMLImageElement.complete：ブラウザがイメージの取得を成功したかどうかにかかわらずtrueであるブール値を返します。画像にsrcの値がない場合は、trueを表示します。

var elem = $("#myImg"); 
 

 
if (!elem.prop('complete')) { 
 
    console.log("Waiting to be loaded!"); 
 
    elem.on('load', function() { 
 
    console.log("Loaded!"); 
 
    console.log(this.complete); 
 
    }); 
 
} else { 
 
    console.log("Already loaded!"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<img src='http://www.wired.com/wp-content/uploads/2015/09/google-logo.jpg' id='myImg'>

Answer 2

あなたは、画像へのバージョンとして乱数を付加することができます。だから毎回、画像を読み込み、ページの読み込み時にキャッシュから取り込まないようにします。

var randNum = Math.random(); 
var imageSource= "../include/images/image.png?v="+randNum ; 

imgタグのsrc属性にimageSourceを割り当てます。