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();
	});

	function scrollLoad(){
		var winHeight = window.innerHeight ? window.innerHeight : $(window).height(),
		posBottom = $(document).height() - winHeight;
		if($(this).scrollTop() == posBottom) {
			var adjScrTop = $(document).scrollTop();
			$('html,body').animate({scrollTop:(adjScrTop)-1},0);
			$.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[i].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[v].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[v].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();
					});
					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ソースを記述させることが出来る様になっています。

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

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

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

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (14)

  • H_A | 2014.04.17 12:15

    教えて頂きたいのですが、読み込むファイルはjsonでないと難しいのでしょうか?
    jsonファイルを編集するツールもなく、今後の編集が素人でも分かりやすいものを制作したいのです。

  • BlackFlag | 2014.04.18 0:59

    >H_Aさん
    コメントありがとうございます。
    このスクロール読み込みをご検討いただいているようで
    嬉しく思っております。

    ご質問いただきました件についてですが
    当スクリプトでは読み込むソースに関しては
    JSON形式のみでの仕様となっております。

    またテキストファイル等の構成で作成することができましたら
    ここで紹介させていただきたいと思います。

    よろしくお願いします。

  • ページ最下部までスクロールすると自動で次のアイテムを読み込む何かを作ってみた | Me & SharePoint | 2014.08.05 17:47

    [...] jQueryでページ最下部までスクロールした際に外部HTML(JSON形式)化した要素を追加する方法 | BlackFlag [...]

  • masa | 2014.11.18 21:39

    いつもサイト参考にさせていただいております。
    jsonで追加した要素にもjavascriptを効かせたいのですが
    方法はございますでしょうか。
    調べたところload後にコールバック関数で呼ぶとあったのですが
    私が未熟なこともありよくわかりませんでした。
    お手数ですがご教授いただけますと幸いです。

    よろしくお願いいたします。

  • BlackFlag | 2014.11.21 1:04

    >masaさん
    コメントありがとうございます。
    このスクロール読み込みスクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問いただきました件についてですが
    json読み込み後に実行させるスクリプトは
    サンプルスクリプトで言う56行目の
    complete内に入れることで動作するのではないかと思っております。

    お試しください。
    よろしくお願いします。

  • masa | 2014.11.25 11:15

    ご丁寧に返答ありがとうございます。
    解決いたしました!
    未熟な質問で申し訳ございませんでした。

    ありがとうございます。

  • NOX | 2014.12.02 16:38

    いつも参考にさせて頂いております。
    質問させて頂きたいのですが、こちらのスクロール読み込みスクリプトを、2つ以上のカラムにそれぞれ別のJSONを読み込ませる仕様にすることは可能でしょうか。
    イメージとしましてはこちらの過去の記事にあります、”jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験【複数設置対応パターン】”に、
    こちらのスクロール読み込みスクリプトを実装した形です。
    もし可能でしたら、JSONの振り分け方についてご指導頂けないでしょうか。
    お手数おかけしてすみませんがよろしくお願い致します。

  • BlackFlag | 2014.12.08 0:43

    >NOXさん
    コメントありがとうございます。
    当記事のスクロール読み込みスクリプトをお試しいただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    現状はページスクロールが最下部に来た際に
    「scrollLoad()」の関数を実行させている構成になっているので
    これを複製して「scrollLoad2()」のようなものを作り
    当記事のスクリプト11行目と14行目のところで
    2つの関数を実行させるように追記すればいけるのではないかと思っております。

    お試しください。
    よろしくお願いします。

  • is | 2015.03.13 19:17

    お世話になります。
    いつも色々と利用させて頂いております。

    こちらのプラグインですが、最下部まで行かないと表示しないと思います。
    例えば厚いフッターがある場合、表示したいブロックから最下部までの距離があり
    なかなか商品が出てきません。

    例えば
    loadNum = 5, // 読み込む個数

    ここで設定した数が初期値の段階で表示させておく方法はありますでしょうか?
    次にスクロールした場合は5の次 6から現れる形にしたいと思います。
    良い方法があればご教示願いします。

  • BlackFlag | 2015.03.15 10:50

    >isさん
    コメントありがとうございます。
    当記事のスクロール読み込みスクリプトをお試しいただいている様で
    嬉しく思っております。

    ページロード時に必ず最初の件数分を表示することを
    当記事のスクリプトで簡単にやるには
    スクリプト9~12行目を削除して、
    その部分に代わりにスクリプト21~62行目をコピーして張り付けることで
    ページロード時に一度、読み込みを実行させることが可能になるかと思います。

    お試しください。
    よろしくお願いします。

  • is | 2015.03.17 20:08

    ありがとうございました!
    無事初期表示する事ができました。
    私の書き方がもう少ししっかりしていれば2度手間にならなくて済んだのですが、

    最下部まで行かないと次を読み込みしないと思います。
    最下部まで行かなくてもスクロールしているうちに
    次々と読み込むようにしたいのですができますでしょうか?

    私自身初心者で誠に申し訳ございません。
    とても素晴らしいので実装したと思います。
    ご教示願います。
    宜しくお願い致します。

  • BlackFlag | 2015.03.20 1:24

    >isさん
    無事に初期表示実装できたようで安心致しました。

    スクロールの読み込み位置に関してですが
    基本的には最下部に到達した判別で構成してあるので
    キレイに動作するかはわかりませんが
    スクリプト20行目にある「posBottom」を「(posBottom-100)」などと
    最下部から何pxか上の段階で処理を走らせればいけるのではないかと思っております。

    想定での返答になってしまいますが
    お試しください。
    よろしくお願いします。

  • okaken | 2015.03.26 19:05

    はじめまして、いつも参考にさせていただいております!

    masonry

    との併用は難しいでしょうか?

  • BlackFlag | 2015.03.29 0:40

    >okakenさん
    コメントありがとうございます。

    masonryとの併用はスクリプト56行目以降の「complete」で
    リストを読み込んだ後にmasonryを実行させるスクリプトを
    追記することで可能になるのではないでしょうか。

    憶測の返答になってしまいますが
    お試しください。
    よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR