javascript - 画像オブジェクトが表示されているかどうかを検出するにはどうすればよいですか?

Question

大きな画像用に DOM に画像オブジェクトをロードすると、iPad の表示が一瞬フリーズします。

テスト目的で、GIF アニメーション ローダーを回転させ、大きな画像を DOM に追加します。画像が読み込まれて DOM に追加されると、画像が表示されるまで GIF アニメーションがフリーズすることがわかります。このフリーズは、CSS3 アニメーション効果を無効にするのに十分です。

のようなものはありますか

var image = new Image();
image.ready = function() { alert('the image is being displayed.') };

Answer 1

このように画像が読み込まれたかどうかを確認できます

var img = new Image();
img.onload = function() {
  alert('Done!');
}
img.src = '/images/myImage.jpg';

Answer 2

モバイル Web アプリケーションで画像をプリロードするために、html5-preloader を使用して成功しました。これはあなたにも役立つかもしれないもののようです。

HTML5プリローダー