博客首页异步加载分页

index.html

<div class="wrapper">

{% for post in paginator.posts %}
<div class="article">
<h1>
	<span>{{ post.date | date: "%b %d, %Y" }}</span> 
	<a href="{{ post.url }}">{{ post.title }}</a>
</h1>
{{ post.content}}
</div>
{% endfor %}


<div class="paging">
{% if paginator.page == 5 %}

	<ul class="postsList">
	{% for post in site.posts limit: 25 offset:25 %}
	<li><span>{{ post.date | date: "%b %d, %Y" }}</span> <a href="{{ post.url }}">{{ post.title }}</a></li>
	{% endfor %}
	<li><a class="btn"  href="/archive/">存档</a> →</li>
{% endif %}
</div>

</div>


<script src="/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/waypoints.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	// 关于waypoint，请看 http://imakewebthings.com/jquery-waypoints/
	var $loading = $("<div class='loading' style='text-align:center'><img src='/images/loading.gif'></div>"),
	$footer = $('footer'),
	opts = {
		offset: '100%'
	};
	
	var count = 2;
	
	$footer.waypoint(function(event, direction) {
		$footer.waypoint('remove');
		$('.paging').append($loading);			
		var pageStr = '/page' + count + '/ .wrapper .article';
		$('<div/>').load(pageStr,function(){ 
			$(this).appendTo('.wrapper');    // once they're loaded, append them to our content area
			$('div.loading').remove();
			if ( count< 5 ) $footer.waypoint(opts);
			count = count + 1;
		});
		if(count == 5){
			$('<div/>').load('/page5 .wrapper .paging',function(){
				$(this).appendTo('.wrapper'); 
			});
		}
	}, opts);		
});
</script>

this Will be helpful，Thanks