jQueryでページ最下部までスクロールした際に外部HTML（JSON形式）化した要素を追加する方法

2013/08/06 TAGS :jQuery, スクロール

TwitterやFacebookで見るUIの様な、ページの最下部にスクロールした際に
自動的に追加要素の読み込み処理をするjQueryプラグインは多々ありますが
任意のHTMLソースを簡単に追加できるものがなかなか見当たらなかったので
jQueryを使ってJSON形式で試しに作ってみたのを紹介してみます。

jQueryでページ最下部までスクロールした際に外部HTML（JSON形式）化した要素を追加する方法

サンプルを別枠で表示する

ページの最下部までスクロールをすると
追加で要素を読み込みます。

サンプルでは28個の要素を
5個ずつ追加表示しています。
（最後は3つ表示）

全体構成についてまずはHTMLから。

◆HTML
<div id="loadarea"></div><!--/#loadarea-->

HTMLには要素を追加させたい箇所に
任意のID（もしくはクラス）を付けた
ブロック要素を配置するだけです。

そしてCSSは以下の様になります。

◆CSS
/* #loadarea
--------------------------- */
#loadarea {
	margin: 0 auto;
	width: 500px;
	text-align: left;
}
#loadarea .loadItem {
	padding: 10px 0;
	width: 500px;
	line-height: 160%;
	border-bottom: #666 1px dotted;
}
#loadarea #item1 {
	border-top: #666 1px dotted;
}
#loadarea .loadItem img {
	margin: 0 15px 0 0;
	width: 200px;
	height: 200px;
	float: left;
}

/* #nowLoading
--------------------------- */
#nowLoading {
	padding: 5px 0;
	width: 100%;
	text-align: center;
}

/* =======================================
	ClearFixElements
======================================= */
#loadarea .loadItem:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

#loadarea .loadItem {
	display: inline-block;
	overflow: hidden;
}

基本的にはCSSは動作に影響しないもので
サンプルのレイアウトを形成しているものになっています。

そして実際の動作スクリプトは以下の様になります。

◆SCRIPT
$(function(){
	var setArea = $('#loadarea'),
	loadNum = 5, // 読み込む個数
	loadTxt = 'Now Loading...', // Loading中の表示テキスト
	fadeSpeed = 500; // フェードスピード

	$(window).load(function(){
		var loadWinHeight = $(window).height(),loadDocHeight = $(document).height();
		if(loadWinHeight >= loadDocHeight){
			scrollLoad();
		}
	}).scroll(function(){
		scrollLoad();
	});

	loadFlg = true;

	function scrollLoad(){
		var winHeight = window.innerHeight ? window.innerHeight : $(window).height(),
		posBottom = $(document).height() - winHeight;
		if($(this).scrollTop() >= posBottom) {
			if(loadFlg){
				loadFlg = false;

				$.ajax({
					url: 'js/include.json',
					dataType: 'json',
					success : function(data){
						var dataLengh = data.length,
						loadItemLength = setArea.find('.loadItem').length,
						setAdj = (dataLengh)-(loadItemLength),
						setBeg = (dataLengh)-(setAdj);
						if(!(dataLengh == loadItemLength)){
							setArea.append('<div id="nowLoading">' + loadTxt + '</div>');
							if(loadItemLength == 0){
								for (var i=0; i<loadNum; i++) {
									$('<div id="item' + data&#91;i&#93;.itemNum + '" class="loadItem">' + data[i].itemSource + '</div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
								}
							} else if(loadItemLength > 0 && loadItemLength < dataLengh){
								if(loadNum < setAdj){
									for (var i=0; i<loadNum; i++) {
										v = i+setBeg;
										$('<div id="item' + data&#91;v&#93;.itemNum + '" class="loadItem">' + data[v].itemSource + '</div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
									}
								} else if(loadNum >= setAdj){
									for (var i=0; i<setAdj; i++) {
										v = i+setBeg;
										$('<div id="item' + data&#91;v&#93;.itemNum + '" class="loadItem">' + data[v].itemSource + '</div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
									}
								}
							} else if(loadItemLength == dataLengh){
								return false;
							}
						} else {
							return false;
						}
					},
					complete : function(){
						$('#nowLoading').each(function(){
							$(this).remove();
						});
						setTimeout(function(){
							loadFlg = true;
						},500);
						return false;
					}
				});
				return false;
			}
		}
	}
});

今回のサンプルではJSONファイルとの兼ね合いから
外部JSファイル構成になっていますので
ここには記述していませんが
別途jQueryファイルは必要になります。

スクリプト開始部分にある設定値の内容は以下の様になっています。

var setArea = $(‘#loadarea’)	要素を追加表示させるブロック要素名（クラスでも可）
loadNum = 5	一度に読み込む個数
loadTxt = ‘Now Loading…’	ローディング中の表示テキスト
fadeSpeed = 500	要素を追加する際のフェードスピード

これらの設定値を変更することでもろもろ調整が可能になっています。

追加される要素は一つひとつが
＜div＞で囲われるようになっており
個々にID名が付与されるようになっています。
※実行後のHTMLソースをFirebug等の開発ツールで見てもらえると分かるかと思います。
（ID名に関してはJSONファイルに記述）

スクリプト10行目の「url: ‘js/include.json’」が
読み込むJSONファイルの指定になるので
パスやファイル名を変える際にはここを変更します。

そして読み込むJSONファイルは以下の様になっています。
（ちょっとムダに長いです・・・）

◆JSON
[
	{
		"itemNum": "1",
		"itemSource": "<img src='img/photo1.jpg' alt='' />【photo1】<br>これは追加要素1つ目のダミーテキストです。これは追加要素1つ目のダミーテキストです。これは追加要素1つ目のダミーテキストです。これは追加要素1つ目のダミーテキストです。これは追加要素1つ目のダミーテキストです。これは追加要素1つ目のダミーテキストです。これは追加要素1つ目のダミーテキストです。"
	},
	{
		"itemNum": "2",
		"itemSource": "<img src='img/photo2.jpg' alt='' />【photo2】<br>これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。"
	},
	{
		"itemNum": "3",
		"itemSource": "<img src='img/photo3.jpg' alt='' />【photo3】<br>これは追加要素3つ目のダミーテキストです。これは追加要素3つ目のダミーテキストです。これは追加要素3つ目のダミーテキストです。これは追加要素3つ目のダミーテキストです。"
	},
	{
		"itemNum": "4",
		"itemSource": "<img src='img/photo4.jpg' alt='' />【photo4】<br>これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。"
	},
	{
		"itemNum": "5",
		"itemSource": "<img src='img/photo5.jpg' alt='' />【photo5】<br>これは追加要素5つ目のダミーテキストです。これは追加要素5つ目のダミーテキストです。これは追加要素5つ目のダミーテキストです。これは追加要素5つ目のダミーテキストです。これは追加要素5つ目のダミーテキストです。"
	},
	{
		"itemNum": "6",
		"itemSource": "<img src='img/photo6.jpg' alt='' />【photo6】<br>これは追加要素6つ目のダミーテキストです。"
	},
	{
		"itemNum": "7",
		"itemSource": "<img src='img/photo7.jpg' alt='' />【photo7】<br>これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。"
	},
	{
		"itemNum": "8",
		"itemSource": "<img src='img/photo8.jpg' alt='' />【photo8】<br>これは追加要素8つ目のダミーテキストです。これは追加要素8つ目のダミーテキストです。これは追加要素8つ目のダミーテキストです。これは追加要素8つ目のダミーテキストです。これは追加要素8つ目のダミーテキストです。"
	},
	{
		"itemNum": "9",
		"itemSource": "<img src='img/photo9.jpg' alt='' />【photo9】<br>これは追加要素9つ目のダミーテキストです。これは追加要素9つ目のダミーテキストです。これは追加要素9つ目のダミーテキストです。"
	},
	{
		"itemNum": "10",
		"itemSource": "<img src='img/photo10.jpg' alt='' />【photo10】<br>これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。"
	},
	{
		"itemNum": "11",
		"itemSource": "<img src='img/photo11.jpg' alt='' />【photo11】<br>これは追加要素11つ目のダミーテキストです。これは追加要素11つ目のダミーテキストです。これは追加要素11つ目のダミーテキストです。これは追加要素11つ目のダミーテキストです。"
	},
	{
		"itemNum": "12",
		"itemSource": "<img src='img/photo12.jpg' alt='' />【photo12】<br>これは追加要素12つ目のダミーテキストです。これは追加要素12つ目のダミーテキストです。これは追加要素12つ目のダミーテキストです。これは追加要素12つ目のダミーテキストです。これは追加要素12つ目のダミーテキストです。これは追加要素12つ目のダミーテキストです。これは追加要素12つ目のダミーテキストです。"
	},
	{
		"itemNum": "13",
		"itemSource": "<img src='img/photo13.jpg' alt='' />【photo13】<br>これは追加要素13つ目のダミーテキストです。"
	},
	{
		"itemNum": "14",
		"itemSource": "<img src='img/photo14.jpg' alt='' />【photo14】<br>これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。"
	},
	{
		"itemNum": "15",
		"itemSource": "<img src='img/photo15.jpg' alt='' />【photo15】<br>これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。"
	},
	{
		"itemNum": "16",
		"itemSource": "<img src='img/photo16.jpg' alt='' />【photo16】<br>これは追加要素16つ目のダミーテキストです。これは追加要素16つ目のダミーテキストです。これは追加要素16つ目のダミーテキストです。これは追加要素16つ目のダミーテキストです。"
	},
	{
		"itemNum": "17",
		"itemSource": "<img src='img/photo17.jpg' alt='' />【photo17】<br>これは追加要素17つ目のダミーテキストです。これは追加要素17つ目のダミーテキストです。"
	},
	{
		"itemNum": "18",
		"itemSource": "<img src='img/photo18.jpg' alt='' />【photo18】<br>これは追加要素18つ目のダミーテキストです。これは追加要素18つ目のダミーテキストです。これは追加要素18つ目のダミーテキストです。これは追加要素18つ目のダミーテキストです。これは追加要素18つ目のダミーテキストです。これは追加要素18つ目のダミーテキストです。これは追加要素18つ目のダミーテキストです。"
	},
	{
		"itemNum": "19",
		"itemSource": "<img src='img/photo19.jpg' alt='' />【photo19】<br>これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。"
	},
	{
		"itemNum": "20",
		"itemSource": "<img src='img/photo20.jpg' alt='' />【photo20】<br>これは追加要素20つ目のダミーテキストです。これは追加要素20つ目のダミーテキストです。これは追加要素20つ目のダミーテキストです。"
	},
	{
		"itemNum": "21",
		"itemSource": "<img src='img/photo21.jpg' alt='' />【photo21】<br>これは追加要素21つ目のダミーテキストです。これは追加要素21つ目のダミーテキストです。これは追加要素21つ目のダミーテキストです。これは追加要素21つ目のダミーテキストです。これは追加要素21つ目のダミーテキストです。これは追加要素21つ目のダミーテキストです。"
	},
	{
		"itemNum": "22",
		"itemSource": "<img src='img/photo22.jpg' alt='' />【photo22】<br>これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。"
	},
	{
		"itemNum": "23",
		"itemSource": "<img src='img/photo23.jpg' alt='' />【photo23】<br>これは追加要素23つ目のダミーテキストです。"
	},
	{
		"itemNum": "24",
		"itemSource": "<img src='img/photo24.jpg' alt='' />【photo24】<br>これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。"
	},
	{
		"itemNum": "25",
		"itemSource": "<img src='img/photo25.jpg' alt='' />【photo25】<br>これは追加要素25つ目のダミーテキストです。これは追加要素25つ目のダミーテキストです。これは追加要素25つ目のダミーテキストです。これは追加要素25つ目のダミーテキストです。"
	},
	{
		"itemNum": "26",
		"itemSource": "<img src='img/photo26.jpg' alt='' />【photo26】<br>これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。"
	},
	{
		"itemNum": "27",
		"itemSource": "<img src='img/photo27.jpg' alt='' />【photo27】<br>これは追加要素27つ目のダミーテキストです。これは追加要素27つ目のダミーテキストです。これは追加要素27つ目のダミーテキストです。これは追加要素27つ目のダミーテキストです。これは追加要素27つ目のダミーテキストです。"
	},
	{
		"itemNum": "28",
		"itemSource": "<img src='img/photo28.jpg' alt='' />【photo28】<br>これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。"
	}
]

サンプルで表示させている
追加要素28個分のHTMLソースになります。

「itemNum」と「itemSource」が1セットになっており
「itemNum」は追加させる要素のナンバリング、
「itemSource」は実際に追加させるHTMLソース部分になっています。

「itemNum」で追加させるナンバーは
生成されるソースの＜div＞にID名として入ることになるので
要素の連番を入れておきます。
（同じ数値を入れても動作自体には影響しませんが。。）

「itemSource」で記述するHTMLソースはJSONファイルの構成上、
属性はシングルクォーテーション「’’」で記述する必要がありますが
この部分に読み込む要素に対して、個別にHTMLソースを記述させることが出来る様になっています。

一つひとつのセットは { ～ } で囲われており
セットの間は「,」カンマで区切られていますが
最後のセットだけはカンマが付かない構成になります。

ページ内で表示する要素が多くなってしまう場合は
この様にソースを外部化してスクロールで読み込むようにすることで
ページロード時の負荷を軽くすることも可能になるかと思います。

ページスクロールで要素を追加表示させる際にぜひ。。。

サンプルファイルをダウンロードしたい方はこちらから