javascript 画像の読み込み中を確認する

javascript 画像の読み込み中を確認する

javascriptで画像オブジェクトのcompleteプロパティを使用して画像の読み込み中を確認するサンプルコードを記述してます。読み込み中のテストをするため1GBバイトの画像を読み込むサンプルコードとなってます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43

※windows10にApacheのインストールはこちら

completeプロパティ使い方

completeプロパティを使うと画像の読み込み中であることの確認が可能です。

画像が完全に読み込まれた場合とリンク切れの場合はtrue、それ以外はfalseを返します。

completeプロパティ使い方

サンプルコード

以下は、1GB近くのサイズのあるの画像を読み込み、「判定」ボタンをクリックして読み込み中であるかをするサンプルコードとなります。。

※cssには「uikit」を使用してます。

読み込み中と判定されることが確認できます。

読み込みが完了となると、読み込み完了と表示されます。