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>
jQuery 显示加载更多(节流) 实现预加载的更多相关文章
- Entity Framework关联查询以及数据加载(延迟加载,预加载)
数据加载分为延迟加载和预加载 EF的关联实体加载有三种方式:Lazy Loading,Eager Loading,Explicit Loading,其中Lazy Loading和Explicit Lo ...
- easyui treegrid 封装(不用分页,用加载更多按钮)延迟加载加加载更多
/** * @author wsf数据加载 */ ; var intervalId = null; (function (win,$){ $.myCache = { dataCache : {},// ...
- JQ封装图片预加载插件
我们知道,图片的加载,特别是资源较大的图片,加载相当耗费时间.为了提高用户体验,不得不使用图片预加载技术来提前加载,以提高用户在浏览时的流畅度. 先来弄明白图片的懒加载和预加载的不同: 1)概念:懒加 ...
- JS图片预加载插件
在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片.预加载:提前加载 ...
- 帝国cms 加载更多的实现(父栏目以及子栏目都可以实现)
1. <div class="pagelist"> <span id="loadmore" class="btn" sty ...
- Flutter 开发从 0 到 1(四)ListView 下拉加载和加载更多
在<APP 开发从 0 到 1(三)布局与 ListView>我们完成了 ListView,这篇文章将做 ListView 下拉加载和加载更多. ListView 下拉加载 Flutter ...
- javascript图片懒加载与预加载的分析
javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...
- 关于cocos2d-x 与 cocos2d-html5 资源预加载的思考
移动端资源预加载,可以做到需要加载的时候,从本地磁盘加载到内存,当纹理不需要的时候,都是强制清理内存里的纹理占用: cc.TextureCache.getInstance().removeAllTex ...
- 预加载与智能预加载(iOS)
来源:Draveness(@Draveness) 链接:http://www.jianshu.com/p/1519a5302141 前两次的分享分别介绍了 ASDK 对于渲染的优化以及 ASDK 中使 ...
随机推荐
- Linux 上的基础网络设备详解
抽象网络设备的原理及使用 网络虚拟化是 Cloud 中的一个重要部分.作为基础知识,本文详细讲述 Linux 抽象出来的各种网络设备的原理.用法.数据流向.您通过此文,能够知道如何使用 Linux 的 ...
- USB Device Finder
http://www.velleman.eu/images/tmp/usbfind.c #ifdef __cplusplus extern "C" { #endif #includ ...
- 关于 TIdHttp
经验总结: 1.IdHttp 不支持多线程,只支持异步.所有网上的多线程写法下,如果同时并发多个长 GET 或 POST 请求时,会阻塞. 以下代码用于显示下载数据的进程. procedure TFo ...
- 【JavaScript】Javascript中的函数声明和函数表达式
Javascript有很多有趣的用法,在Google Code Search里能找到不少,举一个例子: <script> ~function() { alert("hello, ...
- centos 安装http协议的git server
1.服务器端安装httpd,git,gitweb等 1 #yum install httpd git git-daemon gitweb 2.服务器端初始化仓库 1 2 3 #mkdir -p /d ...
- CENTOS YUM软件源
CentOS 7.0 使用 YUM 安装 MySQL 报错 问题现象 CentOS 7.0 使用 YUM 安装 MySQL 时出现类似如下错误信息: File contains no section ...
- Win7 IE故障:APPCRASH,d3d9.dll,c0000005
问题: 今天使用使用IE登录某网址,发现总是报错,如下图,无法浏览. 解决方案: 主要讲IE的呈现方案修改即可,如下步骤: 在IE的[Intern ...
- c# 高效的线程安全队列ConcurrentQueue(下) Segment类
Segment成员变量 long long m_index; 记录该segment的索引号. int* volatile m_state; 状态数组,标识所对应的元素节点的状态,默认值为0,如果该元素 ...
- 技术随笔 查找速度最快的Google IP
转:http://www.xiumu.org/technology/the-find-the-fastest-in-the-google-ip.shtml 体验秒开GOOGLE的感觉! 在http:/ ...
- oracle数据库常用SQL语句
1)删除表的一列 ALTER TABLE 表名 DROP COLUMN 列名; 2)增加表的一列 且默认值为0 alter table 表名 add 字段名 类型 default '0'; 3)修改表 ...