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];
	}
});