专栏名称: 月光博客
月光博客 http://williamlong.info
目录
相关文章推荐
时代财经APP  ·  财仔精选 | 一周热文回顾(2.3-2.8) ·  23 小时前  
时代财经APP  ·  财仔精选 | 一周热文回顾(2.3-2.8) ·  23 小时前  
深度强化学习实验室  ·  DeepSeek核心强化学习GRPO算法解读 ... ·  昨天  
深度强化学习实验室  ·  DeepSeek核心强化学习GRPO算法解读 ... ·  昨天  
济宁市公安局济东分局  ·  新华鲜报丨交易额增长超九成!“China ... ·  2 天前  
济宁市公安局济东分局  ·  新华鲜报丨交易额增长超九成!“China ... ·  2 天前  
厦门网  ·  DeepSeek官方声明 ·  3 天前  
厦门网  ·  DeepSeek官方声明 ·  3 天前  
51好读  ›  专栏  ›  月光博客

使用INFINITE AJAX SCROLL实现下拉加载效果

月光博客  · 公众号  · 科技自媒体  · 2019-02-16 20:00

正文

现在很多网页都有个体验不错的效果:浏览到页面底部的时候,自动加载下一页内容,也就是下拉加载效果,这种效果可以让用户不用点击“下一页”按钮,也可以实现翻页,无论在PC还是手机上,体验效果都很不错,下面我就介绍一下网站开发的时候如何实现下拉加载效果。

Infinite Ajax Scroll是一款jQuery滚动分页插件(页面滚动到最底部自动异步加载数据),功能完善,设置简单,目前的版本是2.3.0,个人用户可以免费使用。

首先去infiniteajaxscroll网站下载一个名为jquery-ias.min.js的文件,这个js文件需要jquery支持,一般的网站主题都会引入jquery库,没有的话就手动加一个jquery库。

之后确认一下网站的框架结构,找到四个元素的id或名称:内容块、内容条目、导航栏、下一页。

Infinite Ajax Scroll支持按照ID取值和按照class取值,ID就在名称前加#,class就在名称前加。符号。编辑jquery-ias.min.js文件,在文件尾部加入配置参数代码即可。

举个例子。

一个页面的内容如下:


...

...


则 Infinite Ajax Scroll 需要增加的代码如下:

var ias = $.ias({
container:  ".container",
item:       ".item",
pagination: "#pagination",
next:       ".next a"
});
// Add a loader image which is displayed during loading
ias.extension(new IASSpinnerExtension());

上面代码最后一行是在加载的时候显示一个加载图标,不加也可以。

对于WordPress来说,不同的模板修改修改的参数不同,但大多数直接设置即可正常工作。

对于Z-Blog来说,就不行了,因为里面没有下一页的标记,需要修改代码,打开c_system_lib.asp文件,找到下面一行:







请到「今天看啥」查看全文