トップページ » Program » jQueryで画像の連番ファイルを先読み。

jQueryで画像の連番ファイルを先読み。

2013/11/18

chapcher

画像一覧などを先に読み込んで、綺麗表示した時などに使えるのでは思います。

画像のファイル名などのデフォルトは、
img/img_000.jpg
からとなってます。

<div></div><!-- ロードされてるかチェック表示用。画像先読みには必要ないです。 -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
    
$(function(){
    
    var imgName = "img/img_"; // ファイル名の番号前の文字
    var fileNumber = 78; // 読み込む枚数
    var extension = ".jpg"; // 画像の拡張子
    
    var digit = 3; // ファイル名連番桁数
    digit = - digit; // slice用に負の数に変換
          
    
    var result = "";
    var preloadImages = [];
    
    // ファイル名の配列作成
    for( var i = 0 ; i < fileNumber ; i++ ){
        result = ('0000' + i ).slice( digit ); // 0を増やせば桁数の増加に対応
        preloadImages.push( imgName + result + extension );
    }

    // 先読み開始
    for( var i = 0; i < preloadImages.length ; i++ ){
        $("<img>").attr("src", preloadImages[i]);
    }
    
    
    
    /////////////////////////
    // ロードされてるかチェック用。下記は画像先読みには必要ないです。
    $(window).load(function() {
         alert("finish");
    });
    
    $(document).on("click" , window , function(){
       $("div").append("<img src='img/img_050.jpg' /> "); 
    });
    /////////////////////////
		    
});
    
</script>