zoukankan      html  css  js  c++  java
  • jQuery 显示加载更多(节流) 实现预加载

    (function () {
    var showMoreNChildren = function ($children, n) {
    //显示某jquery元素下的前n个隐藏的子元素
    var $hiddenChildren = $children.filter(":hidden");
    var cnt = $hiddenChildren.length;
    for (var i = 0; i < n && i < cnt ; i++) {
    $hiddenChildren.eq(i).show();
    var temp=$hiddenChildren.eq(i).find('img');
    temp.attr("src",temp.attr("_src"));
    }
    return cnt - n;//返回还剩余的隐藏子元素的数量
    }
    jQuery.showMore = function (selector) {
    if (selector == undefined) { selector = ".showMoreNChildren" }
    //对页中现有的class=showMorehandle的元素,在之后添加显示更多条,并绑定点击行为
    $(selector).each(function () {
    var pagesize = $(this).attr("pagesize") || 10;
    var $children = $(this).children();
    if ($children.length > pagesize) {
    for (var i = pagesize; i < $children.length; i++) {
    $children.eq(i).hide();
    }
    $("<div class='last_but showMorehandle'> <div id='btnTest'>查看更多 </div></div>").insertAfter($(this)).click(function () {

    if (showMoreNChildren($children, pagesize) <= 0) {
    //如果目标元素已经没有隐藏的子元素了,就隐藏“点击更多的按钮条”
    $(this).hide();
    };
    });
    }
    });
    }
    })()

    <div class="container-fluid">
    <ul class="showMoreNChildren" pagesize="10">
    ${获取理财列表}

    <li>

    </li>
    </ul>

    </div>

  • 相关阅读:
    linux系统用户登陆时脚本执行顺序
    stm32 win7 64位虚拟串口驱动安装失败解决办法
    python全栈day6
    python全栈day5
    江湖救急(处理域名未备案网站问题)
    python全栈day4
    python全栈day3
    python全栈day2
    python全栈day1
    PHP 跨域之header
  • 原文地址:https://www.cnblogs.com/roves/p/4886025.html
Copyright © 2011-2022 走看看