2011/03/11の「東北地方太平洋沖地震」震災後、しばらく更新が滞っていましたが、
少しずつ再開してみようかと思います。

Twitterなどで見かけるページの最下部までスクロールすると続きのコンテンツを読み込む動作を、
jQueryで可能とするプラグイン「Autobrowse jQuery plugin」が、ちょっと気になっていたので
メモ書き程度に紹介してみます。

Autobrowse jQuery plugin


jquery.esn.autobrowse.js

上記チュートリアルページでデモが確認できますが
サンプルではページロード時に決まった数(20個)の画像を先に読み込んでおいて
ページをスクロールするとさらに20個ずつ画像を読み込み、
100個まで表示した時点で動作をストップさせています。

使い方もさほど難しくなく、
プラグインファイルと下記の実行用スクリプトにて
実装が可能なようです。

◆SCRIPT
$(".page").autobrowse(
	url: function (offset, count){
		return "http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?";
	},template: function (response){
		var markup='';
		for (var i=0; i<response.items.length; i++){
			markup+='<a href="'+response.items[i].link+'"><img src="'+response.items[i].media.m+'" /></a>'
		}
		return markup;
	},
	itemsReturned: function (response) { return response.items.length; },
	count: 20,
	offset: 0,
	totalCount: 100,
	loader: '<div class="loader"></div>',
	useCache: true
);

生成されるソースをスクリプト上で記述できたり
オプションも少し用意されているので
応用していろいろ使えそうです。

ご参考までに。。。

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

Related Posts

Comments (0)







コメント内容

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

スクロールに合わせてコンテンツの読み込みを開始するjQueryプラグイン「Autobrowse jQuery plugin」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner