织梦dedecms列表页实现无限下拉加载效果的方法技巧
最近帮人制作网站，发现资讯类的网站，在文章列表页展示信息的时候，使用“加载更多”、“无限下拉”效果的特别多，今天刚好在dedecms（织梦系统）上做了一个测试，实现了此效果，所以，就借助马海祥博客的平台，拿出来跟大家免费分享一下，因为我觉得技术这东西，如果不是特别大特别麻烦的，就应该免费大家共享下，可以帮助更多的SEO和站长做好网站。
这里主要说明下使用方法及展示的效果，这篇教程超级简单，不用改动程序内核文件，不用懂php代码，会使用到Infinite Ajax Scroll插件，即无限的ajax滚动，当页面滚动到容器可见部分将自动异步加载数据，插件的集成很简单，接下来，就跟大家具体的介绍一下操作步骤：
一、插件说明及功能效果
1、支持“加载更多”
2、支持“无限下拉”
3、支持动静态页面无限加载
4、支持图片延迟加载
二、操作步骤
Infinite Ajax Scroll 简称 ias，无限的ajax滚动，是一款jQuery滚动ajax分页插件，当页面滚动到容器可见部分将自动异步加载数据。
首先，先来看一下效果展示：
点击加载更多效果：
点击加载更多
无限下拉效果：
无限下拉效果
插件的集成很简单，分以下几个步骤：
1、添加js文件
首先，要在页面头部中引用jquery.js 与 jquery-ias.min.js
<script src='http://你的域名/js/jquery.js'></script>
<script src="http://你的域名/js/jquery-ias.min.js"></script>
注意：jquery.js库版本必须大于1.6版本的
备注：jquery-ias.min.js与jquery.js 下载链接：https://pan.baidu.com/s/1ofKY6wtd7EPMNDh6DGysyA 提取码: p627
2、写入插件参数
接着上面的js，在页面中写入插件参数
<script type="text/javascript">
var ias = $.ias({
container: ".listbox", //包含所有文章的元素
item: ".item", //文章元素
pagination: ".pagelist", //分页元素
next: ".pagelist a.nextpage", //下一页元素
});
ias.extension(new IASSpinnerExtension({
src: "/img/load.gif", //此选项为加载时缓冲图片
html: '<p style="text-align: center;"><img src="{src}"/></p>'
}));
ias.extension(new IASTriggerExtension({
text: '点击加载更多', //此选项为需要点击时的文字
html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',
offset: !1, //设置此项，如 offset:2 页之后需要手动点击才能加载，offset:!1 则一直为无限加载
}));
ias.extension(new IASNoneLeftExtension({
text: '已经加载完成！', // 加载完成时的提示
html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',
}));
</script>
3、html代码和css样式添加
dedecms列表模板html代码示范，注意html代码中的 listbox、item、pagelist、nextpage 要与上面js中的名称统一。
<!-- listbox这个必须包住分页条在里面 -->
<div class="listbox">
<ul>
{dede:list pagesize='10'}
<li class="item"><a href="[field:arcurl/]" class="title">[field:title/]</a></li>
{/dede:list}
</ul>
<ul class="pagelist">
{dede:pagelist listitem="next" listsize="1" runphp=yes}
@me = preg_replace('/<ashref=(['"]?).+?/', '$0 class="nextpage"', @me);
{/dede:pagelist}
</ul>
</div>
好了，如此便可实现以上效果图的效果了！
4、延迟加载图片效果
以上步骤完成后，如果你还要在加载更多后显示的文章中支持图片延迟加载，需要添加此图片延迟加载功能，没有延迟加载图片的久不需要理会了。
ias.on('rendered', function(items) {
$(".content img").lazyload({
effect: "fadeIn",
failure_limit : 10
}); //这里是你调用Lazyload的代码
})
好了，整个操作步骤是不是很简单，不需要你修改系统文件，只需引用2个js文件即可，便可让你的网站文章展示更多信息给访客了。
马海祥博客点评：
随着社交媒体的流行，大量的内容被消费；无限滚动为用户提供了一种浏览海量信息的有效方式，用户不需要等待页面的预先加载。
对于资讯网站来说，相比于点击翻页来说，无限下拉加载效果能带来更好的用户体验，鼠标的滚轮或触摸屏的存在让滚动比点击更快更简单。对于很长的连续性的内容，比如教程，滚动提供了更好的可用性，因为它无需与把文本切分到几个页面里展示，用户会在你的网页上停留更长的时间，因此增加了用户参与。
本文发布于马海祥博客文章，如想转载，请注明原文网址摘自于https://www.mahaixiang.cn/CMS/1828.html，注明出处；否则，禁止转载；谢谢配合！相关标签搜索： 织梦 dedecms 方法技巧 列表页 无限下拉 无限加载
上一篇：如何在Linux系统环境下安装DedeCMS站点及安全设置
下一篇：织梦dedecms栏目添加并调用自定义缩略图功能
您可能还会对以下这些文章感兴趣！
-
dedeCMS模版SQL注入漏洞和SQL注入漏洞的修复方法
今天，在检查阿里云服务器安全问题的时候，发现服务器上的织梦网站有2个漏洞提示，分别为：dedecms模版SQL注入漏洞；dedecms SQL注入漏洞。该漏洞都是来自织梦的/member/文件夹中的soft_add.php和album_add.php文件的不安全，导致SQL注入的发生。在阿里云的漏洞描述详细区域下方将有收到影响的文件以及服务器，可以使用阿里云建议的修复方案。……【查看全文】
-
如何解决点击次数影响网页加载速度的问题
对于一个专门做博客的站长来说，在文章页中，什么js效果都可以忽略，但是有一个js文件是必须要留下的，那就是文章点击次数的js文件，因为这样你就可以一目了然的看到你这篇文章受欢迎的程度了。但是最近有个朋友反映说，因为自己的博客空间买的是虚拟空间，运行加载的比……【查看全文】
-
dedeCMS任意文件上传漏洞select_soft_post.php的修复方法
对于大多数站长来说，使用织梦程序搭建的网站最头疼的问题就是安全问题了，近期博主也多次收到阿里云后台的信息提示网站存在一些漏洞需要及时处理。进入阿里云后台，我查看了漏洞提示：dedecms任意文件上传漏洞；原因是：dedecms变量覆盖漏洞导致任意文件上传，对于该漏洞，解决方法也比较简单，便找到了修复方法，在此，我便借助马海祥博客的平台将修复方法分享如下……【查看全文】
-
织梦DedeCms文章标题和简介摘要字数长度限制修改的方法教程
我们在使用织梦CMS系统建站的时候，网站前端在调用文章的过程中，经常会碰到标题和文章摘要会自动截取一定量的字数，而并非全部调用出来，无论怎么修改调用代码都不行，尤其是使用UTF8版本的织梦系统，调用的文字更少了。其实，这主要是因为Dedecms织梦系统默认的文章标题的最大长度为60字节，使用GBK版本的，也就是30个汉字；使用UTF8版本的，也就是10个汉字；如果文章标题超过60字节将会自动截断，导致标题显示不全，而现在文章标题30个汉字是……【查看全文】
-
DedeCMS后台文件任意上传漏洞media_add.php的修复方法
最近，公司的网站迁移到阿里云之后，一直提示有一个漏洞需要紧急修复，漏洞名称：dedecms后台文件任意上传漏洞；漏洞描述：dedecms早期版本后台存在大量的富文本编辑器，该控件提供了一些文件上传接口，同时dedecms对上传文件的后缀类型未进行严格的限制，这导致了黑客可以上传WEBSHELL，获取网站后台权限。……【查看全文】
-
如何合并栏目列表分页URL首页链接index.html与第一页的重复
最近随着百度对原创文章的支持调整，发现自己负责的几个站首页的排名都很好，可就是栏目页的排名不是很理想，仔细看了下，从seo的角度来说，发现栏目首页的代码出现重复现象，分散了栏目页的权重。而搜索引擎优化对于大部分网站的重要性也不言而喻，那么我们要怎么更好……【查看全文】
阅读：1712关键词： URL首页链接 index.html 栏目列表分页 合并栏目URL 日期：2012-10-06 -
dedecms cookies泄漏导致SQL漏洞的修复方法
最近，公司做的新网站都是用织梦系统搭建的，虽说织梦系统是很好用，但织梦程序的最头疼的就是安全问题了，今天，公司的网站就收到阿里云后台的信息提示网站存在一些漏洞需要及时处理。漏洞提示：dedecms cookies泄漏导致SQL漏洞；漏洞描述是：dedecms的文章发表表单中泄漏了用于防御CSRF的核心cookie，同时在其他核心支付系统也使用了同样的cookie进行验证，黑客可利用泄漏的cookie通过后台验证，进行后台注入。如下图所示：……【查看全文】
-
DedeCMS <=5.7 SP2 file_class.php 任意文件上传漏洞
最近有个博友咨询我说，他用织梦DedeCMS系统做的一个新站，上传到服务器后，便提示有严重漏洞危险，问该如何解决？其实这个漏洞很好解决的，网上也早已公布的修复方法，在此，我便借助马海祥博客的平台将修复方法分享如下：漏洞名称：file_class.php 任意文件上传漏洞；漏洞公告：dedecms v5.7 sp2 任意文件上传漏洞 (CVE-2019-8362)……【查看全文】
-
如何在Linux系统环境下安装DedeCMS站点及安全设置
近年来，越来越多的企业看到了Linux的这些强大的功能，利用Linux担任全方位的网络服务器。Linux在它的追捧者眼里是一个近乎完美的操作系统，它具有运行稳定、功能强大、获取方便等优点，随着Linux服务器应用范围越来越广泛，国内很多站长也开始使用它作为自己的Web服务器，所……【查看全文】
-
防止dedeCMS织梦网站被黑挂木马的一些方法
Dedecms后台系统程序升级到5.7 sp2版本之后，依旧存在很多漏洞。截止到今天，依旧有大约3万个使用dedecms管理系统程序开发的网站被黑客挂马。目前，dedecms官网没有给予任何答复以及解决方案。另外，对于国内公认最具权威的360网站安全监测……【查看全文】
-
织梦dedecms栏目添加并调用自定义缩略图功能
我们用织梦dedecms后台管理系统制作网站的时候，点击进入每个栏目时，都会有“关于我们”，“新闻中心”，“产品展示”等提示性的图片，单独调用这些图片比较麻烦，对此，我们可以修改程序，实现每个栏目都有上传栏目缩略图的功能，就方便多了。网上有很多关于dedecms添……【查看全文】
-
取消网站文件目录脚本执行权限的方法步骤
对于网站安全维护的过程中，目录的执行权限是非常敏感的，一般来说，可以写入的目录是不能够拥有脚本的执行权限的，像DedeCMS系统，可写入的有两个目录，既：data文件和uploads文件，data目录主要是基本配置文件和缓存数据，uploads则是附件上传保存的目录，针对不同服务器环……【查看全文】
-
迅睿CMS系统栏目页面分页样式错位的解决方法
最近，开始使用迅睿CMS系统来搭建网站，在套用列表页的时候，分页样式总是出现错位的问题，对于这种情况，我们该如何解决呢？对于很多初次使用迅睿CMS系统的的朋友来说，可能都会遇到过这问题吧，下面我就借助马海祥博客的平台与大家分享一下具体的解决方法：……【查看全文】
-
安全正确转移网站data目录文件的具体方法步骤
说到网站安全的问题，那就不得不先说下data目录文件了，data目录是系统缓存和配置文件的目录，一旦此目录文件被攻击后，那对网站可能就是致命的了，一般来说，data目录都有可以读写的权限，只要是能够写入的目录都可能存在安全隐患，很多站长甚至给予这个目录可执行的权……【查看全文】
-
织梦系统(dedecms)文章样式属性的调用标签汇总
在《织梦(dedecms)标签调用代码大全》一文中，我已经跟大家介绍了一些我们常用的织梦模板调用标签，本文再跟大家介绍一些织梦文章样式属性的调用标签，合理的利用文章调用标签，不禁可以加强页面的用户体验，也可以使网站的结构布局更加合理，充分的展示我们想要推广的文章，……【查看全文】
-
织梦模板(dedecms)功能模块模板路径对应表
织梦内容管理系统（DedeCms）是国内知名PHP开源网站管理系统，也是目前国内使用用户最多的PHP类CMS系统，DedeCms免费版的主要目标用户锁定在个人站长，功能主要专注于个人网站或中小型门户的构建，当然也不乏有企业用户在使用本系统。织梦内容管理系统（DedeCms）基于……【查看全文】
-
织梦dedecms列表页实现无限下拉加载效果的方法技巧
最近帮人制作网站，发现资讯类的网站，在文章列表页展示信息的时候，使用“加载更多”、“无限下拉”效果的特别多，今天刚好在dedecms（织梦系统）上做了一个测试，实现了此效果，所以，就借助马海祥博客的平台，拿出来跟大家免费分享一下，因为我觉得技术这东西，如……【查看全文】
-
织梦(dedecms)后台登录验证码不显示或不正常的解决方法
随着互联网的快速发展，站长已经成为了互联网中的新兴人群，而其中建站使用的cms以织梦居多，伴随着人数的增多，在使用织梦cms中遇到的问题也越来越多，其中最棘手的问题莫过于验证码无法显示而导致无法登陆后台，如果连后台都登陆不了，何谈操作，这也成为了许多新手站……【查看全文】
-
dedecms v5.7 CSRF保护措施绕过漏洞
今日，在检查网站及服务器安全问题的时候，发现阿里云后台一直提示有一个“dedecms v5.7 CSRF保护措施绕过漏洞”影响网站安全，需要紧急修复，漏洞名称：dedecms v5.7 CSRF保护措施绕过漏洞；漏洞描述：dedecms最新版（20171228更新），增加了部分函数对CSRF漏洞的检查，然而对函数输出校验不当导致可以传入恶意数组绕过CSRF防御。……【查看全文】
-
修改网站后台管理员用户名admin的具体操作方法汇总
这两天，群里有很多的博友反馈说，自己的网站被挂马，大家也一起吐槽各种被黑、被挂马的现象及解决方法。其中有几个博友说自己网站模板代码被改，是因为网站后台管理员账号被破解了，黑客就直接登录后台随意的改起来了。询问大家有什么方法能把网站后台的admin账号修改……【查看全文】
分类目录
热点推荐
免费产品或服务转型赚钱的13种模式
O2O创业者的10个切入点及创业机会
产品经理该如何学习结构思考力
网赚新手快速寻找暴利项目产品的4大途径
盘点那些不为人知的App推广技巧
资深高级产品经理教你工作做事的7个实用法则
App界面常用的数据加载设计和技术
如何避免APP推送通知的发布误区？
大型电子商务网站的SEO优化要怎么做?
解读2013年大数据应用与趋势的调研互联网更多>>
如何开启苹果系统的两步验证机制，避免iCloud帐号遭到攻击
首先，你需要登录至苹果的网页版Apple ID管理系统，你需要点击“管理你的Apple ID”，随后输入帐号密码信息。在登录……
网站开启https后，百度分享插件不显示了该怎么解决？
百度分享插件不支持https的解决方法：网站自从开启https之后，网页中的百度分享就不能用了！但是又寻找不到类似百……
互联网思维的一些特征
如今，互联网迅猛发展已经渗透人们生活各个方面，尤其是互联网正加快向传统行业渗透和融合，对传统行业提出严……
基于用户体验的移动端交互动效设计 
利于SEO优化的织梦标签调用代码 
网页设计新手需知道的10条实用法则 SEO优化 更多>>
|
|
-
如今的搜索引擎似乎越来越来喜欢灰
如今，纯黑帽SEO的玩法难度已越来越大，其实不…… -
百度移动搜索冰桶算法上线带给了我
冰桶算法基于百度移动搜索，将针对低质站点及…… -
如何将一个第三方整形网站做到月订
在互联网行业工作也有很多年了，纵观这些年来…… -
如何根据企业形象定位企业网站的诉
网站是企业的理念体现，是网络营销的基础，在…… -
通过流量公式原理获得淘宝免费自然
不管是刚做淘宝，还是做淘宝有一段时间的卖家…… -
如何以SEO的角度来优化网站的URL连接
大部分网站的URL命名规则是“根域名+栏目+文章页…… -
如何做好一个企业网站
随着互联网的快速发展，企业从开始的被动建设…… -
网站的站外SEO优化为什么要做外链
前几年，做SEO的小伙伴们的主要任务就是发外链……
本月热点文章
- 1织梦系统(dedecms)文章样式属性的调用标签汇总
- 2图解Dedecms网站后台文章采集功能的使用方法步骤
- 3修改DedeCMS图片上传路径命名规则的具体方法步骤
- 4如何在Linux系统环境下安装DedeCMS站点及安全设置
- 5迅睿CMS系统栏目页面分页样式错位的解决方法
- 6首页显示空白,页面提示无法找到function lib_dsv函数的解决方法
- 7DedeCMS后台文件任意上传漏洞media_add.php的修复方法
- 8织梦DedeCms文章标题和简介摘要字数长度限制修改的方法教程
- 9dedeCMS任意文件上传漏洞select_soft_post.php的修复方法
- 10织梦后台升级后验证码登录一直显示错误的解决方法