JSで画像のプリロードを行いたい。

Question

困ってること

参考を見ながら、サムネイル画像をマウスオーバーするとメイン画像が変更される仕様を実装しました。
しかし、画像が切替わるたびに、切替るメイン画像がロードされていない関係で、表示に若干のラグが生じてしまします。

２回目以降はキャッシュされている関係で、読込もアニメーションもスムーズなのですが、
最初の段階でも画像表示をスムーズにしたいのですが、どのような方法がありますでしょうか。

要は画像のプレロード？をJSで行いたい。

下記のコードは現在のコードなのですが、要するにしたいことは、
マウスオーバーされずまだ表示されていない画像も、しっかりロードされ、いつでも表示ＯＫの状態にしたいです

現在のjavascript(上記のサイトを参考にしました。)

$(function() {
	$('img.thumb').mouseover(function(){
		// "_thumb"を削った画像ファイル名を取得
		var selectedSrc = $(this).attr('src').replace(/^(.+)_thumb(.gif|.jpg|.png+)$/, "$1"+"$2");
		// 画像入れ替え
		$('img.mainImage').stop().fadeOut(300,
			function(){
				$('img.mainImage').attr('src',  selectedSrc);
				$('img.mainImage').stop().fadeIn(500);
			}
		);
		// サムネイルの枠を変更
		$(this).css({"border":"1px solid pink"});
	});

	// マウスアウトでサムネイル枠もとに戻す
	$('img.thumb').mouseout(function(){
		$(this).css({"border":""});
	});
});

Answer 1

var img=[];
img[0]=new Image();
img[0].src="xxx.jpg";
img[1]=new Image();
img[1].src="yyy.jpg";

のように予めプレロードしておいて

hoge.src=img[0].src;

のようにして入れ替えるとよいでしょう

Answer 2

パッと思いつくのだと下記２点が思いつきます

1. metaタグでプリロードを行う

https://blog.jxck.io/entries/2016-03-04/preload.html

1. ajaxライブラリなどで、画像ファイルを１度でも読んでおく

$.ajax('画像パス')

などなど