1278阅读
1回复

dedecms列表页加载更多功能的实现

楼层直达

只看楼主更多操作安逸楼主发表于: 2018-10-22

dedecms 列表页加载更多插件，加载更多按钮为下拉自动触发形式，本次织梦dedecms实现点击下拉加载更多主要用到js技术。

步骤如下：

1、在</head>头部加入js代码以及引入js文件。

jquery-ias.min.js    下载地址https://www.genban.org/imgups/soft/180206/1-1P206092342.rar

JavaScript

01
var ias = $.ias({
02
    container: ".listbox",
03
    item: ".item",
04
    pagination: ".pagelist",
05
    next: ".pagelist a.next",
06
});
07
ias.extension(new IASSpinnerExtension({
08
    src: "/images/loadinglit.gif",
09
    html: '<p style="text-align: center;" class="clear"><img src="{src}"/></p>'
10
}));
11
ias.extension(new IASTriggerExtension({
12
    text: '点击加载更多',
13
    html: '<p style="text-align: center; cursor: pointer;" class="clear more"><a>{text}</a></p>',
14
    offset: !1,
15
}));
16
ias.extension(new IASNoneLeftExtension({
17
    text: '没有更多了，已经加载完！',
18
    html: '<p style="text-align: center; cursor: pointer;" class="clear more"><a>{text}</a></p>',
19
}));

找到

1
{dede:pagelist listitem="pre,next,pageno,option" listsize="3"/}

修改为

1
{dede:pagelist listitem="next" listsize="1" runphp="yes"}
2
        @me = preg_replace('/<a\shref=([\'"]?).+?\1/', '$0', @me);
3
{/dede:pagelist}

效果即实现。

回复引用

举报顶端

云烟

级别: 安逸大版主

只看该作者安逸沙发发表于: 2018-10-22

jquery delayLoading.js插件的延迟加载效果和图片延迟加载
1、首页给大家介绍一下这款插件的主要用途

　　主要应用于图片的延迟加载，而且可以变换不同的延迟加载效果，适合相册图片。有做相册的可以考虑应用。

2、兼容IE7以上都兼容，其他的浏览器也兼容。所以说兼容性还是不错的。

3、插件的调用也是很简单的，看下面展示：

　　下面对调用属性的解释也都写在了代码中，可以参考换不同的风格。

复制代码
<script type="text/javascript">
        $(function () {
            $("img").delayLoading({
                defaultImg: "images/loading.jpg",           // 预加载前显示的图片
                errorImg: "",                        // 读取图片错误时替换图片(默认：与defaultImg一样)
                imgSrcAttr: "originalSrc",           // 记录图片路径的属性(默认：originalSrc，页面img的src属性也要替换为originalSrc)
                beforehand: 0,                       // 预先提前多少像素加载图片(默认：0)
                event: "scroll",                     // 触发加载图片事件(默认：scroll)
                duration: "normal",                  // 三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000),默认:"normal"
                container: window,                   // 对象加载的位置容器(默认：window)
                success: function (imgObj) { },      // 加载图片成功后的回调函数(默认：不执行任何操作)
                error: function (imgObj) { }         // 加载图片失败后的回调函数(默认：不执行任何操作)
            });
        });
</script>

回复引用

举报顶端

发帖回复

« 返回列表上一主题下一主题


	http://www.cnease.cn 访问内容超出本站范围，不能确定是否安全


	关闭选中1篇全选

dedecms列表页加载更多功能的实现

安逸相关话题