JavaScriptプログラムに関する各種メモ書き

HTML5またはcssまたはJavaScript(jQuery未使用)で画像の先読み(プリロード)を行う

● CSS、HTMLのみでプリロードを行う(全ブラウザOK)

#preloadedImages {
       width: 0px;
       height: 0px;
       display: inline;
       background-image: url(path/to/image1.png); /* 読ませたいイメージ1 */
       background-image: url(path/to/image2.png); /* 読ませたいイメージ2 */
}
<div id="preloadedImages"></div>

● HTML5のみでプリロードを行う

IEに対応しなくていい場合は 次の link rel="preload" が簡単でいいと思います。
<head>〜ないにタグを1つ加えるだけです。これでプリロードが行われます。(表示はされません。)

<html>
<head>
 <link rel="preload" href="path/to/image1.png" as="image">
</head>
asに指定する値 ファイルの種類
audio 音声ファイル。
document <frame> や <iframe> の中に埋め込まれる HTML 文書。
embed <embed> 要素の中に埋め込まれるリソース。
fetch ArrayBuffer や JSON ファイルのような、フェッチまたは XHR 要求でアクセスされるリソース。
font フォントファイル。
image 画像ファイル。
object <embed> 要素の中に埋め込まれるリソース。
script JavaScript ファイル。
style スタイルシート。
track WebVTT ファイル。
worker JavaScript ウェブワーカーまたは共有ワーカー。
video Video file.

● JavaScript(jQuery使わず)でプリロードを行う(全ブラウザOK)

var img_folder = "./assets/img/common";

var preload_images = [
	img_folder + "/pc-small-header__top--on.png" ,
	img_folder + "/pc-small-header__info--on.png" ,
];

document.addEventListener('DOMContentLoaded', function(){
	for (var i = 0; i < preload_images.length; i++) {
	    var img = new Image();
	    img.src = preload_images[i];
	}
});

関連エントリー

No.740
09/05 21:21

edit

jQuery