(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>

jQuery 显示加载更多(节流) 实现预加载的更多相关文章

  1. Entity Framework关联查询以及数据加载(延迟加载,预加载)

    数据加载分为延迟加载和预加载 EF的关联实体加载有三种方式:Lazy Loading,Eager Loading,Explicit Loading,其中Lazy Loading和Explicit Lo ...

  2. easyui treegrid 封装(不用分页,用加载更多按钮)延迟加载加加载更多

    /** * @author wsf数据加载 */ ; var intervalId = null; (function (win,$){ $.myCache = { dataCache : {},// ...

  3. JQ封装图片预加载插件

    我们知道,图片的加载,特别是资源较大的图片,加载相当耗费时间.为了提高用户体验,不得不使用图片预加载技术来提前加载,以提高用户在浏览时的流畅度. 先来弄明白图片的懒加载和预加载的不同: 1)概念:懒加 ...

  4. JS图片预加载插件

    在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片.预加载:提前加载 ...

  5. 帝国cms 加载更多的实现(父栏目以及子栏目都可以实现)

    1. <div class="pagelist"> <span id="loadmore" class="btn" sty ...

  6. Flutter 开发从 0 到 1(四)ListView 下拉加载和加载更多

    在<APP 开发从 0 到 1(三)布局与 ListView>我们完成了 ListView,这篇文章将做 ListView 下拉加载和加载更多. ListView 下拉加载 Flutter ...

  7. javascript图片懒加载与预加载的分析

    javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

  8. 关于cocos2d-x 与 cocos2d-html5 资源预加载的思考

    移动端资源预加载,可以做到需要加载的时候,从本地磁盘加载到内存,当纹理不需要的时候,都是强制清理内存里的纹理占用: cc.TextureCache.getInstance().removeAllTex ...

  9. 预加载与智能预加载(iOS)

    来源:Draveness(@Draveness) 链接:http://www.jianshu.com/p/1519a5302141 前两次的分享分别介绍了 ASDK 对于渲染的优化以及 ASDK 中使 ...

随机推荐

  1. Firefox插件一键切换兼容IE

    转载:http://mozilla.com.cn/thread-42137-1-1.html 让火狐兼容IE的双核扩展,一键切换至IE内核,网银支付无忧愁.支持Adblock plus和FireGes ...

  2. SAP Connector 3.0 .Net 开发

    在VS2010中使用控制台应用程序使用SAP Connector 3.0开发时,当程序运行到实例化RfcConfigParameters时报错 (RfcConfigParametersrefcon = ...

  3. CodeForces 176C Playing with Superglue 博弈论

    Playing with Superglue 题目连接: http://codeforces.com/problemset/problem/176/C Description Two players ...

  4. hihocoder #1177 : 顺子 模拟

    #1177 : 顺子 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://hihocoder.com/problemset/problem/1177 ...

  5. android startActivityForResult的用法

    有时候我们需要把A activity提交数据给B  activity处理,然后把结果返回给A 这种方式在很多种情况需要用到,比如我应用的程序需要有拍照上传的功能. 一种解决方案是  我的应用程序 〉调 ...

  6. WCF摘记

    //绑定形式 NetTcpBinding bind = new NetTcpBinding(); //地址 EndpointAddress address = new EndpointAddress( ...

  7. CGI,FastCGI,PHP-CGI与PHP-FPM(转)

    http://www.cnblogs.com/zl0372/articles/php_4.html CGI CGI全称是“公共网关接口”(Common Gateway Interface),HTTP服 ...

  8. Nhibernate详解

    http://sifang2004.cnblogs.com/archive/2005/09/05/230713.html 本文约定:1. Nhibernate简写为NHB;2. 本文例子的开发平台为w ...

  9. css笔记 css用法:

    前端框架:AdminLTE  https://almsaeedstudio.com/themes/AdminLTE/index2.html CSS学习教程: http://www.divcss5.co ...

  10. 关于composer

    Composer PHP依赖管理的新时代http://segmentfault.com/a/1190000000353129 Composer 的主页   https://getcomposer.or ...