トップページ » Program » jQueryで画像の連番ファイルを先読み。
jQueryで画像の連番ファイルを先読み。
2013/11/18
画像一覧などを先に読み込んで、綺麗表示した時などに使えるのでは思います。
画像のファイル名などのデフォルトは、
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>
似た内容のおすすめ記事