关于wordpress分页无限加载

2013.08.22 分享 22448 人浏览 6 条留言

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

无限加载ajax-loader

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

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

首先引用jq库(这里用的是微软的jq库,至于为什么,不解释了...)

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

然后加载js文件

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

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

最后是js内容

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

  1. <div id="huilang">  
  2.     <div class="post">这里每篇文章的内容</div>  
  3.     <div class="post">这里每篇文章的内容</div>  
  4. </div>  
  5. <div id="nav">  
  6.     <div class="next">  
  7.         <a href="https://huilang.me/page/2/">下一页</a>  
  8.     </div>  
  9. </div>  

那js就按照下面格式加载

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

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

  1. <script>  
  2.   jQuery(document).ready(function(){  
  3.       /** 
  4.        * Customize the previous navitation menu 
  5.        */  
  6.      jQuery('#nav-below .nav-previous a').text('<?php _e('Load More...', 'tt_child'); ?>');  
  7.       var infinite_scroll = {  
  8.           loading: {  
  9.               img: "<?php echo get_stylesheet_directory_uri(); ?>/img/ajax-loader.gif",  
  10.               msgText: "<?php _e('Loading the next set of posts...', 'tt_child'); ?>",  
  11.               finishedMsg: "<?php _e('All posts loaded.', 'tt_child'); ?>"  
  12.           },  
  13.           behavior: 'twitter',  
  14.           nextSelector:'#nav .next a',  
  15.           navSelector:"#nav .next",  
  16.           itemSelector:"#huilang .post",  
  17.           contentSelector:"#huilang"  
  18.       };  
  19.       jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll, function(){  
  20.           jQuery('.click_more').insertAfter('.post_list .post:last');  
  21.       });  
  22.   });  
  23.   </script>  

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

  1. #nav{display:block!important;}  

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

本站的js配置如下

  1. //自动加载  
  2.   jQuery(document).ready(function(){  
  3.   /** 
  4.   * Customize the previous navitation menu 
  5.   */  
  6.   var infinite_scroll = {  
  7.   loading: {  
  8.   img: "/wp-content/themes/Huilang_line/img/ajax-loader.gif",//正在载入中图片显示  
  9.   msgText: "正在努力加载中",  
  10.   finishedMsg: "文章加载完毕"  
  11.   },  
  12.   nextSelector:".indexbody nav a",//下一页链接地址  
  13.   navSelector:".indexbody nav",//包括上下翻页的div结构  
  14.   itemSelector:"section.indexbody article",//包含每篇文章的div结构  
  15.   contentSelector:"section.indexbody"//包含所有文章的div结构  
  16.   };  
  17.   jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );  
  18.   });  

折腾吧,骚年。

文章地址:https://huilang.me/infinitescroll/

“关于wordpress分页无限加载” 有 6 条评论

  1. 大发说道:

    infinite-scroll这插件有点大。。一个下拉刷新不值得用这货

  2. kk说道:

    【首先引用jq库(这里用的是微软的jq库,至于为什么,不解释了…)】

    为什么呢 :?: :?: :?:

回复本文

您的电子邮箱地址不会被公开。 必填项已用 * 标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif