您现在的位置是:首页 > 建站建站

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

查看 cc博主 的更多文章cc博主2021-10-03【建站】797人已围观

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

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

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

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

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

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

  Infinite Ajax Scroll支持按照ID取值和按照class取值,ID就在名称前加#,class就在名称前加。符号。编辑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:".container",
  item:".item",
  pagination:"#pagination",
  next:".next a",
  loader:""
});
// Add a loader image which is displayed during loading
ias.extension(new IASSpinnerExtension());

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

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

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

Template_PageBar=Template_PageBar & "<span class=""page now-page"">" & i & "</span>"

  在下面增加如下几行

elseif i=intNowPage + 1 then
strPageBar=Replace(strPageBar,"<#pagebar/page/url#>",s)
strPageBar=Replace(strPageBar,"<#pagebar/page/number#>","<span class=""page"">"&i&"</span>")
strPageBar=Replace(strPageBar,"page-numbers","page-numbers next-page")
Template_PageBar=Template_PageBar & strPageBar

  之后就有了下一页的选择器next-page了。

  对于Google Blogger来说,在布局界面,添加HTML/JAVASCRIPT小工具,然后在里面添加如下代码。

var ias = jQuery.ias({
    container : '.blog-posts',
    item: '.post-outer',
    pagination: '#blog-pager',
    next: '#blog-pager-older-link a',
    loader: ''
});
ias.extension(new IASSpinnerExtension());

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

Tags:clash订阅节点购买

文章评论

猜你喜欢

  • 滴滴存在恶意逃避监管等16项违法事实,相关违法行为持续长达7年,被处80.26亿元罚款

    业界滴滴存在恶意逃避监管等16项违法事实,相关违法行为持续长达7年,被处80.26亿元罚款

    7月21日消息,据网信中国,根据网络安全审查结论及发现的问题和线索,国家互联网信息办公室依法对滴滴全球股份有限公司涉嫌违法行为进行立案调查。经查实,滴滴全球股份有限公司违反《网络安全法》《数据安全法》《个人信息保护法》的违法违规行为事实清楚、证据确凿、情节严重...

    查看 cc博客 的更多文章2022-07-21497人已围观

    阅读更多
  • TikTok电商折戟英国背后:策略失误、考核混乱、部门内耗

    业界TikTok电商折戟英国背后:策略失误、考核混乱、部门内耗

    作者 | 代润泽编辑 | 麦广炜6月初的一个清晨,一母婴电商品牌突然发现,自家TikTok英国店铺销量血崩。与以往销售下滑有迹可循不同,这次商家面对惨淡的经营数据时,毫无头绪,工具模型和多年的从业经验,并不能告诉他答案。溯源无门,找不出原因。过去此...

    查看 cc博客 的更多文章2022-07-01477人已围观

    阅读更多
  • 联发科推出首款5G毫米波天玑处理器

    芯片联发科推出首款5G毫米波天玑处理器

    雷峰网5月23日消息,本周一,联发科发布旗下首款支持5G毫米波的移动平台——天玑1050,支持毫米波和Sub-6GHz全频段5G网络,提供高速率和广覆盖的5G连接,为用户带来更加完整的5G体验。联发科官方表示,天玑1050移动平台采用台积电6nm制程,搭载八...

    查看 cc博客 的更多文章2022-05-23446人已围观

    阅读更多
  • 华为全场景智慧体验再度革新,终端云服务强势赋能1+8+N战略

    业界华为全场景智慧体验再度革新,终端云服务强势赋能1+8+N战略

    在华为2021年度报告会上,孟晚舟表示,华为也许已经穿过了这次劫难的黑障区。一个月后的4月28日,华为举办了折叠旗舰全场景新品发布会,正如孟晚舟所言,突破黑障期的华为继续呈现高歌猛进的势头,折叠旗舰手机HUAWEI Mate Xs 2、华为智慧屏V Pro、H...

    查看 cc博客 的更多文章2022-04-28509人已围观

    阅读更多
  • 阿里云国际版DDoS高防增值服务牦牛云

    服务器评测阿里云国际版DDoS高防增值服务牦牛云

     牦牛云官方网站:点击进入利用国外服务器建站的话,选择就具有多样性了,相较于我们常见的阿里云和腾讯云,国外的大厂商还有谷歌云,微软云,亚马逊云等,但是较之这些,同等产品进行比较的话,阿里云可以说当之无愧的最佳选择,毕竟价格和性能优势足以让人心动。 就...

    查看 cc博客 的更多文章2022-02-16555人已围观

    阅读更多
加入组织
广告

   有免费节点资源,我们会通知你!  加入纸飞机订阅群  

×
天气预报查看日历分享网页电报扫码留言评论Telegram