jQueryで画像をプリロードする

jQueryで画像をプリロードする方法を試してみます。

サンプルコード

プリロード実装前のサンプルです。

HTML

<ul>
	<li><img src="01_off.jpg" width="800" alt="" /></li>
	<li><img src="02_off.jpg" width="800" alt="" /></li>
</ul>

JavaScript

$(function() {
	$('img[src *= "_off"]').hover(function() {
		$(this).attr('src', this.src.replace('_off','_on'));
	}, function() {
		$(this).attr('src', this.src.replace('_on','_off'));
	});
});

プリロード実装前のデモページ
　

サンプルコード

プリロード実装後のサンプルです。

JavaScript

// 画像をプリロードする関数
function jqueryPreload(imgSrc) {
	$('<img>').attr('src', imgSrc);
}
$(function() {
	// プリロードする画像を選択
	$('img[src *= "_off"]').each(function() {
		// プリロードする画像srcを取得
		var imgSrc = $(this).attr('src').replace('_off','_on');
		// プリロード実行
		jqueryPreload(imgSrc);
	});

	$('img[src *= "_off"]').hover(function() {
		$(this).attr('src', this.src.replace('_off','_on'));
	}, function() {
		$(this).attr('src', this.src.replace('_on','_off'));
	});
});

プリロード実装後のデモページ
　

サンプルコード

色々なサイトを見ていると、以下のように実装していることが多いようでした。

JavaScript

$(function() {
	jQuery.preloadImages = function() {
		for(var i = 0; i < arguments.length; i++) {
			jQuery('<img>').attr('src', arguments[i]);
		}
	};
	$.preloadImages('01_on.jpg', '02_on.jpg');

	$('img[src *= "_off"]').hover(function() {
		$(this).attr('src', this.src.replace('_off','_on'));
	}, function() {
		$(this).attr('src', this.src.replace('_on','_off'));
	});
});

プリロード実装後のデモページ2
最初に見たとき、argumentsという配列がどこから出てきたのか謎だったのですが、調べてみると関数へ渡された引数を配列のように扱えるオブジェクトらしいです。
　

【参考サイト】

• jQueryで画像をプリロードする方法 | BlackFlag
• jQuery 画像を事前読み込みさせておく方法 – 画像のプリロードの実装方法 | Stronghold
• arguments – JavaScript | MDN