javascript 画像の読み込み完了イベントを取得する

作成日 2022.06.29
更新日 2023.01.20
javascript
javascript

javascriptで、画像の読み込み完了イベントを取得するサンプルコードを記述してます。画像の読み込みが完了した際に発生するイベント「onload」を使用します。「addEventListener」では「load」を指定します。

1. 環境
2. 画像の読み込み完了イベントを取得
3. サンプルコード

環境

OS windows11 pro 64bit
ブラウザ chrome 109.0.5414.75

Javascript サンプル集はこちら

画像の読み込み完了イベントを取得

画像の読み込み完了イベントを取得するには、「onload」を使用します。

<img id="foo" src="https://placehold.jp/500x500.png" width="500" height="500">

<script>

document.getElementById("foo").onload = function () {

    console.log("読み込みが完了しました")

}

</script>

実行結果をみると、読み込み完了後に「読み込みが完了しました」と表示されることが確認できます。

「addEventListener」を使用しても、同じ結果を得ることができます。

addEventListenerとonの違い

document.getElementById("foo").addEventListener('load', function() {
    
    console.log("読み込みが完了しました")

})

また、javascript部はdocument.getElementByIdを省略して「id名」のみで記述することも可能です。関数もアロー関数を使用できます。

document.getElementByIdの省略して記述する

アロー関数の使い方

foo.addEventListener('load', () => {
    
    console.log("読み込みが完了しました")

})

サンプルコード

以下は、
「取得」ボタンをクリックすると、用意した画像自体のサイズを取得して表示する
サンプルコードとなります。

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

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container text-center w-50" style="margin-top:150px">

    <h2><span class="badge badge-info"></span></h2>

    <img id="foo" src="https://lazesoftware.com/tool/dummyimg/output?date=20220628&id=2c55b144e72ca230ff1a3b99c98884bde7213e04&type=png" width="300" height="300">

  </div>

  <script>

    document.getElementById("foo").onload = function () {

      document.getElementsByClassName('badge')[0].textContent = "読み込みが完了しました"

    }

  </script>
</body>

</html>

画像自体のサイズが取得されていることが確認できます。