朴及设计

优秀的设计服务机构

jQuery-ias 插件可实现滑动到页面底部自动加载新的内容。在 WordPress 中的分页功能配合使用,本站博客归档页面则使用此技术实现。

第一步:下载ias插件

下载地址:https://github.com/webcreate/Infinite-Ajax-Scroll



第二步:在页面中引用文件

<script src="jquery-ias.min.js"></script>

注:如果页面中未引入过 jQuery 库文件,则需引入 jQuery 库文件。



第三步:页面配置

页面 html 结构示意:

<div id="container">
  <div class="post">...</div>
  <div class="post">...</div>
</div>
 
<div id="pagination">
  <a href="/page1/" class="prev">prev</a>
  <a href="/page3/" class="next">next</a>
</div>

配置方法

<script type="text/javascript">
  var ias = jQuery.ias({
    container:  '#container',
    item:       '.post',
    pagination: '#pagination',
    next:       '#pagination a.next'
  });
 
  ias.extension(new IASSpinnerExtension());
  ias.extension(new IASTriggerExtension({offset: 2}));
  ias.extension(new IASNoneLeftExtension({text: "You reached the end"}));
  ias.extension(new IASPagingExtension());
  ias.extension(new IASHistoryExtension({prev: '#pagination a.prev'}));
</script>


完成。