(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. HTML第九天学习笔记

    今天就继续看了下浮点float属性,代码如下: <html> <head> <title>CSS float属性</title> <meta ht ...

  2. 查看系统和PowerShell版本

    查询PowerShell当前版本$psversiontable.BuildVersion.Major 查询Windows当前版本:[System.Environment]::OSVersion.Ver ...

  3. Navicat 导入数据报错 --- 1153 - Got a packet bigger than 'max_allowed_packet' bytes

    在用Navicat导入SQL文件时报错:MySql 错误 Err [Imp] 1153 - Got a packet bigger than 'max_allowed_packet' bytes 查了 ...

  4. Codeforces Round #337 (Div. 2) C. Harmony Analysis 构造

    C. Harmony Analysis 题目连接: http://www.codeforces.com/contest/610/problem/C Description The semester i ...

  5. NGINX源代码剖析 之 CPU绑定(CPU亲和性)

    作者:邹祁峰 邮箱:Qifeng.zou.job@gmail.com 博客:http://blog.csdn.net/qifengzou 日期:2014.06.12 18:44 转载请注明来自&quo ...

  6. android仿win8 metro磁贴布局

    代码下载     //更新代码,   这里是更新后的代码 //////////////////////// 1,含一个图片无限滚动的控件,自己实现的 2.可新增删除每个磁贴 3.来个图片吧 ////* ...

  7. VirtualBox从USB设备(PE)启动

    cmd中执行 VBoxManage internalcommands createrawvmdk -filename E:\usb.vmdk -rawdisk \\.\PhysicalDrive1 - ...

  8. 深入理解MYSQL的MDL元数据锁

    1 前言 2 MDL锁与实现 3 MDL锁的性能与并发改进 4 MDL锁的诊断 前言 好久没更新,主要是因为Inside君最近沉迷于一部动画片——<新葫芦娃兄弟>.终于抽得闲,完成了本篇关 ...

  9. Mip-Mapping很重要

    MipMap这个东东,记得我除了最早在DX9龙书上了解了其基本概念后,以后便再没接触过,因为从创建到使用都是硬件一手包办,所以这个知识点很容易被遗忘和忽视.这几天空闲时恰好发现了一点MipMap引起的 ...

  10. Linux用户空间与内核空间(理解高端内存)

    Linux 操作系统和驱动程序运行在内核空间,应用程序运行在用户空间,两者不能简单地使用指针传递数据,因为Linux使用的虚拟内存机制,用户空间的数据可能被换出,当内核空间使用用户空间指针时,对应的数 ...