有玩过facebook的一定会facebook的内容自动加载印象深刻,而默认 BuddyPress Activity Stream 则没有自动加载内容的功能,每次需要点击 Load more 才能载入更多的内容,用户体验并不好,那么是否可以像facebook一样实现滚动到底部的时候自动加载内容呢?答案是100%肯定的,而且非常简单,实现方法如下:

新建一个文件取名为 activity-loader.js 并且放置在模版目录的 _inc 文件夹里边,并且插入如下代码:

jQuery(document).ready( function() {
 var jq=jQuery;
 var is_activity_loading=false;//we use it to make sure that we don not try to send the request again and again
 
//let us check on window scroll event
 jq(window).scroll(function() {
 //find the visible load more button
 //since bp does not move load more, we need to find the last one which is visible
 var load_more_btn=jq(".load-more:visible");
 //if there is no visible button, there are no mor activities, let us retrn
 if(!load_more_btn.get(0))
 return;
 
 //find the offset of the button
 var pos=load_more_btn.offset();
 
 //if the window height+scrollTop is greater than the offset top, we have reached the button, let us load more activity
 
 if(jq(window).scrollTop() + jq(window).height() > pos.top ) {
 
 load_more_activity();
 }
 
 });
 
 /**
 * The routine loads more activity
 * We call it whenever we reach at the bottom of the activity listing
 *
 */
 function load_more_activity(){
 //check if activity is loading, means is there already a request doing this
 //if yes, just return and let the other request handle it
 if(is_activity_loading)
 return false;
 
//so, it is a new request, let us set the var to true
 is_activity_loading=true;
 //add loading class to load more
 //theme authors may need to change the selector if there theme has a different id
 //I am doing it for bp-default/derivative themes
 //change #content to whatever you have named it in your theme
 jq("#content li.load-more").addClass('loading');
 
 if ( null == jq.cookie('bp-activity-oldestpage') )
 jq.cookie('bp-activity-oldestpage', 1, {
 path: '/'
 } );
 
var oldest_page = ( jq.cookie('bp-activity-oldestpage') * 1 ) + 1;
 
//send the ajax request
 jq.post( ajaxurl, {
 action: 'activity_get_older_updates',
 'cookie': encodeURIComponent(document.cookie),
 'page': oldest_page
 },
 function(response)
 {
 jq(".load-more").hide();//hide any load more button
 jq("#content li.load-more").removeClass('loading');//theme authors, you may need to change it
 
 //update cookie
 jq.cookie( 'bp-activity-oldestpage', oldest_page, {
 path: '/'
 } );
 
 //and append the response
 jq("#content ul.activity-list").append(response.contents);
 
//since we are done, let us set the state that activity has loaded
 
 is_activity_loading=false;
 }, 'json' );
 
return false;
 }
 
});//end of dom ready

然后在模版目录里边的functions.php里边插入如下代码:

function bp_activity_autoloader_inc_js(){
//you can change get_stylesheet_directory_uri() to get_tmplate_directory_uri() if you are author of a parent theme and want to include it in parent theme and not in the child theme.
 wp_enqueue_script('activity-auto-loader', get_stylesheet_directory_uri().'/_inc/activity-loader.js',array('jquery'));//should we make it dependent on 'dtheme-ajax-js'?
}
add_action('bp_enqueue_scripts','bp_activity_autoloader_inc_js',30);

保存上传覆盖即可,前台测试一下你会发现效果很不错,搞定收工。