jQuery 画像を事前に読み込むサンプル

Tweet

Pocket

【この記事を読むのに必要な時間は約 2 分です】

Webページ上でロールオーバーやスワップなど何らかのアクションをトリガーとして画像を表示する際に、サイズの大きい画像だと読み込みに時間がかかりスムーズに画像が表示されないケースがあります。

開発者の環境では見え方に問題がなくとも、通信速度や処理負荷などクライアント側の状況によっては意図しない振る舞いになる可能性があるため、少々サイズの大きい画像を扱う場合には事前に画像を読み込んでおくと良いでしょう。

jQuery を用いた画像を事前に読み込む実装サンプル

以下が jQuery を用いた画像事前読み込みの実装サンプルです。ここでは 5 枚の画像を読み込んでいます。

<script>
$(function(){
    // ファンクション定義
    jQuery.preloadImages = function(){
        for(var i = 0; i<arguments.length; i++){
	    jQuery("<img>").attr("src", arguments[i]);
	}
    };
    // 事前に読み込む画像URLを引数に指定
    $.preloadImages(
        "img/image-001.jpg",
        "img/image-002.jpg",
        "img/image-003.jpg",
        "img/image-004.jpg",
        "img/image-005.jpg");
    }
);
</script>

コード 6 行目にて実際に画像の読み込みを行っています。

jQuery('<img />').attr('src', url);