javascript - 画像がjQuery（またはプレーンJavaScript）にロードされているかどうかを確認します

Question

load()画像の読み込みが完了するとトリガーされるイベントがjQueryにあることは知っています。しかし、画像の読み込みが完了した後にイベントハンドラーがアタッチされている場合はどうなりますか？

$('#myimage').isLoaded()画像が既に読み込まれているかどうかを確認するようなプロパティはありますか？

Answer 1

complete画像のプロパティを確認できます。

$('#myimage').isLoaded()画像が既に読み込まれているかどうかを確認するようなプロパティはありますか？

いいえ、でもあなたはそうすることができます:)

jQuery.fn.isLoaded = function() {
    return this
             .filter("img")
             .filter(function() { return this.complete; }).length > 0;
};

これによりtrue、コレクション内のすべての画像が読み込まれ、false1つ以上の画像が読み込まれなかった場合に生成されます。ニーズに合わせて調整できます。

Answer 2

プレーンJSで十分です。画像オブジェクトには完全なプロパティがあります。ここでそれをチェックしてください：http ：//www.w3schools.com/jsref/tryit.asp？filename = tryjsref_img_complete

Answer 3

それは少しハックで、どこでも機能するかどうかはわかりません。自分でテストしてください。

$.fn.isLoaded = function(message) {
  var $this = $(this);
  if($this.height() > 0 && $this.width() > 0){
     return true;
  }
  return false;
};

$('#myimage').isLoaded()

編集：

これはffとchromeで機能します。

$.fn.isLoaded = function(message) {
  var $this = $(this); 
  $this.hide();   // becaues firefox gives a 24*24 dimension
  var w = this[0].width;
  var h = this[0].height;  
  $this.show(); 
  if(w > 0 || h > 0){ 
    return true;
  } 
  return false;
}; 
console.log($('#myimage').isLoaded());

ただし、画像を非表示にすると、つまり幅と高さが0になるため、つまり失敗します。つまり、画像を非表示にしないでください。

誰かがこれらの機能の両方を組み合わせてクロスブラウザのものを作成できるか、少なくとも誰かが確実に役立つことを願っています。