JavaScriptで画像の動的ロード

JavaScriptを使って画像を動的に読み込む方法のメモです。 画像の読み込み中のローディングイメージの表示などに応用できます。

目次

• JavaScriptで画像の動的ロード
• サンプルコード
• JavaScript部分
• ピュアJS版
• jQuery版
• HTML部分
• 実行結果

以下の例では、インターネットから画像blobデータを取得して<img>タグのsrc属性に突っ込んで画像を表示し、「画像読込中...」の文言を「画像読込完了！」に置き換えています。

サンプルコード

JavaScript部分

ピュアJS版

  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      const msg = document.querySelector('#msg');
      const img = document.querySelector('#img');
      const URL = window.URL || window.webkitURL;
      img.src = URL.createObjectURL(this.response);
      msg.textContent = '画像読込完了！';
    }
  };
  xhr.open('GET', 'https://3.bp.blogspot.com/-C9l4jn_oClE/U3WdDn9_XvI/AAAAAAAAgmE/O03V3A-iHLo/s800/asagao_hachiue.png');
  xhr.responseType = 'blob';
  xhr.send();

jQuery版

  $.ajax({
    url: 'https://3.bp.blogspot.com/-C9l4jn_oClE/U3WdDn9_XvI/AAAAAAAAgmE/O03V3A-iHLo/s800/asagao_hachiue.png',
    cache: false,
    xhr: function() {
      const xhr = new XMLHttpRequest();
      xhr.responseType = 'blob';
      return xhr;
    },
    success: function(data) {
      const msg = document.querySelector('#msg');
      const img = document.querySelector('#img');
      const URL = window.URL || window.webkitURL;
      img.src = URL.createObjectURL(data);
      msg.textContent = '画像読込完了！';
    },
    error: function() {
      // エラー処理
    },
  });

HTML部分

  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

  ...

  <div id="msg">画像読込中...</div>
  <img id="img">

NOTE:ピュアJS版のスクリプトを使う場合は一行目のjqueryロードのコードは不要です。

実行結果

以上です。