欢迎光临
我们一直在努力

使用Infinite Ajax Scroll实现下拉加载效果

如今,许多网页都有很好的效果:当浏览到页面底部时,下一页内容会自动加载,这就是下拉加载效果。该效果允许用户翻阅“下一页”按钮。页面,无论是在PC还是手机上,体验都非常好。下面我将介绍如何在开发网站时实现下拉加载效果。
Infinite Ajax Scroll是一个jQuery滚动分页插件(页面滚动到自动异步加载数据的底部),功能齐全,设置简单,当前版本为2.3.0,个人用户免费。
首先访问infiniteajaxscroll网站下载名为jquery-ias.min.js的文件。这个js文件需要jquery支持。一般网站主题将介绍jquery库。如果没有,请手动添加jquery库。
然后确认网站的框架结构,找到四个元素的id或名称:内容块,内容项,导航栏,下一页。
无限Ajax Scroll支持ID和类的值。 ID前面带有#,并在名称前添加了类。符号。编辑jquery-ias.min.js文件,并将配置参数代码添加到文件末尾。
例如。
页面内容如下:
< div class=" container">
  < div class=" item"></div>
  < div class=" item"></div>
</div>
< div id=" pagination">
  < a href=" page1.html"> 1</a>
  < a href=" page2.html" class=" next"> 2</a>
</DIV>
Infinite Ajax Scroll需要添加的代码如下:
Var ias=$ .ias({
  容器: "container"
   item:      "item"
  分页:“#pagination”,
   next:      "next a"
});
//添加加载期间显示的加载程序图像
Ias.extension(new IASSpinnerExtension());
上面代码的最后一行是在加载时显示加载图标,不添加。
对于WordPress,不同的模板会修改和修改不同的参数,但大多数直接设置都可以使用。
对于Z-Blog,它不起作用,因为下一页没有标记,您需要修改代码,打开c_system_lib.asp文件并找到以下行:
Template_PageBar=Template_PageBar& "< span class="" page now-page"">" &安培;我和我"< /跨度>"
在下面添加以下行
Elseif i=intNowPage + 1然后
strPageBar=替换(strPageBar,"< #pagebar/page/url#>"s)
strPageBar=替换(strPageBar," #pagebar/page/number#>""< span class="" page"">"& i&"< /跨度>")
strPageBar=Replace(strPageBar,“page-numbers”,“page-numbers next-page”)
Template_PageBar=Template_PageBar& strPageBar具有下一页选择器下一页。

未经允许不得转载:美国主机评论博客 » 使用Infinite Ajax Scroll实现下拉加载效果

分享到:更多 ()