JavaScriptで画像ファイルを読み込む

JavaScriptから画像ファイルを読み込む

JavaScriptを使って画像ファイルを読み込む方法はいくつかありますが、今回は以下の4つの方法を解説します。

• img要素のsrc属性に画像ファイルのパスをセットする
• 新しくimg要素を作成する
• CSSのbackgroudプロパティに画像ファイルのパスをセットする
• 予め用意したCSSを適用する

以下のHTMLを使って、上から順番に解説していきます。

HTML コード例

<article>
	<h1>JavaScriptレシピ</h1>
	<img data-src="./image/bear.png" alt="Bear" width="200">
	<img data-src="./image/fox_front.png" alt="Fox" width="200">
	<img data-src="./image/rhinos.png" alt="Rhinos" width="200">
</article>

HTMLのimg要素ではsrc属性がないため、ページが読み込まれたタイミングでは画像ファイルは読み込まれません。

img要素のsrc属性に画像ファイルのパスをセットする

JavaScriptからimg要素のsrc属性に画像ファイルのパスをセットすることで、画像ファイルの読み込みを行います。
画像ファイルのパスはdata-src属性から取得してsrc属性にセットします。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  let img_elements = document.querySelectorAll("img");

  for(let i=0; i<img_elements.length; i++) {

    // 遅延読み込み
    img_elements[i].src = img_elements[i].getAttribute("data-src");
  }
});

ページの読み込みが完了したタイミングに、querySelectorAllメソッドでページ上にあるimg要素を全て取得します。
続くfor文は取得したimg要素の数だけループします。

getAttributeメソッドはdata-src属性の値（画像ファイルのパス）を取得して、その値をそのままsrc属性に設定します。
画像ファイルはこのタイミングで読み込まれます。

画像ファイルの読み込みにかかる時間はサイズやキャッシュ、ネットワークの状況によって異なります。
そのため、for文ではページのimg要素を先頭から順番に処理していきますが、表示される画像の順番は先頭から順番になるとは限りません。

新しくimg要素を作成する

createElementメソッドを使ってimg要素を作成し、src属性に画像ファイルのパスをセットして画像ファイルを読み込みます。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  let img_element = document.createElement("img");
  img_element.src = "./image/bear.png";
  img_element.alt = "Bear";
  img_element.width = 200;

  let article_element = document.querySelector("article");
  article_element.appendChild(img_element);
});

画像ファイルはsrc属性にパスをセットしたタイミングで読み込みが行われます。

CSSのbackgroudプロパティに画像ファイルのパスをセットする

HTML要素を直接編集せずに、CSSのbackgroundプロパティをセットして画像ファイルを読み込みます。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  let article_element = document.querySelector("article");
  article_element.style.setProperty("background", "url(./image/bear.png) left top / 200px auto no-repeat");
});

画像ファイルはbackgroundプロパティにパスをセットしたときに読み込みが行われます。

用意したCSSを適用する

予め用意したCSSを適用して画像を読み込む方法です。
以下の例ではCSSで「.bear」に適用するスタイルを用意しておいて、JavaScriptでarticle要素に対してclassList.addメソッドでclass属性を追加することでCSSを適用します。

CSS コード例

.bear {
  background: url(./image/bear.png) left top / 200px auto no-repeat;
}

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  let article_element = document.querySelector("article");
  article_element.classList.add("bear");
});;

CSSは使われていないスタイルは解析されないため、画像ファイルはclassList.addメソッドでclass属性を追加した時点で適用されます。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。