关于wordpress分页无限加载记忆碎片-网络技术分享

关于wordpress分页无限加载

2013.08.22 分享 22384 人浏览 6 条留言

现在越来越多的网站都添加了无限加载的功能了，像大多数的瀑布流主题，微博的自动加载等等，这样方便了用户浏览，一定程度上提高了用户体验。

以前一直以为实现这个很是麻烦，什么ajax加载什么，搞得头大大的，最后发现有某位大神开发的一个js插件很轻松的就解决了这个问题。

下面就介绍下使用方法吧。

首先引用jq库（这里用的是微软的jq库，至于为什么，不解释了...）

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>

然后加载js文件

<script type="text/javascript" src="https://raw.github.com/paulirish/infinite-scroll/master/jquery.infinitescroll.min.js"></script>

PS：貌似要下载到本地才能用，直接用上面调用老是失败，我也不知道为什么，可能是https的原因

最后是js内容

假如你站点的主题结构如下

那js就按照下面格式加载

<script type="text/javascript">
jQuery(document).ready(function(){
/**
* Customize the previous navitation menu
*/
var infinite_scroll = {
loading: {
img: "<?php echo get_stylesheet_directory_uri(); ?>/img/ajax-loader",//正在载入中图片显示
msgText: "正在努力加载中",
finishedMsg: "文章加载完毕"
},
nextSelector:"#nav .next a",//下一页链接地址
navSelector:"#nav",//包括上下翻页的div结构
itemSelector:"#huilang .post",//包含每篇文章的div结构
contentSelector:"#huilang"//包含所有文章的div结构
};
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
});
</script>

如果不需要滚动到底部自动加载时是希望点击然后加载后续内容，则先加载infinitescroll下面文件夹behaviors的两个js，然后用下面的js替换前面的js内容

<script>
jQuery(document).ready(function(){
/**
* Customize the previous navitation menu
*/
jQuery('#nav-below .nav-previous a').text('<?php _e('Load More...', 'tt_child'); ?>');
var infinite_scroll = {
loading: {
img: "<?php echo get_stylesheet_directory_uri(); ?>/img/ajax-loader.gif",
msgText: "<?php _e('Loading the next set of posts...', 'tt_child'); ?>",
finishedMsg: "<?php _e('All posts loaded.', 'tt_child'); ?>"
},
behavior: 'twitter',
nextSelector:'#nav .next a',
navSelector:"#nav .next",
itemSelector:"#huilang .post",
contentSelector:"#huilang"
};
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll, function(){
jQuery('.click_more').insertAfter('.post_list .post:last');
});
});
</script>

并添加一句css，才不会使其自动隐藏

按照自己站点的div结构进行修改吧。

本站的js配置如下

折腾吧，骚年。