jQuery-要素を指定した回数まで繰り返し表示させる

要素を連続して大量に列べる場合、全部htmlでマークアップしていては大変です。
今回は「画像を100個表示させる」を例に、デモページを作成しました。

デモページ

画像を含んだリストを100まで繰り返して生成する

ファイル名が連番で 1.jpg、2.jpg……100.jpg までの画像があるとします。
(デモページでは10種類の画像を100個用意しているので同じ画像が複数回登場しているように見えますが、本来は全て違う画像ということでお願いします。。)
この画像を1つずつ表示するように、jQueryで以下のタグを繰り返すように指定します。
100ある画像を一度に読み込むと表示に時間がかかってしまうのでlazy loadというプラグインを使用して画面に入った時に画像を表示させるようにしているため、srcにはダミー画像を指定し、data-originalに表示したい画像のパスを指定しています。
Xの部分には1~100までの連番が入ると想定してください。

<li><img class="lazy" src="../lazyload/dummy.gif" data-original="images/X.jpg" alt="X" /><p class="caption">X</p></li>

jQuery

jQueryライブラリと、lazy load のプラグインを読み込みます。
for文でiという変数に1を代入して1ずつ増やしていき、iが100になるまで繰り返します。
ファイル名、alt、キャプションに連番と同様の数字を挿入するため、+i+で変数に代入された数字が表示されるようにしています。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
//画像を含んだリストを100まで繰り返して生成する
$(function(){
    for (var i = 1; i <= 100; i++){
		$('#loop-list').append('<li><img class="lazy" src="../lazyload/dummy.gif" data-original="images/'+i+'.jpg" alt="'+i+'" /><p class="caption">'+i+'</p></li>');
	}
});

//画面に入った時に画像を表示させる
$(window).load(function () {
	$('.lazy').lazyload({
		effect: 'fadeIn',
		effectspeed: 1000
	});
});

RELATED POSTS