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>

时间: 2024-12-07 02:15:51

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

下拉加载更多内容(滚动加载)

最近写项目,要求实现滚动条滚动到底部的时候请求加载更多的数据.要实现此功能首先想到的就是scroll事件,经过查阅资料终于实现此功能,具体原理如下: 首先需要给div加scroll事件,监听滚动条滚动动作.滚动加载的原理:当滚动条的高度加上 滚动条到div顶部的高度 等于div的可滚动高度时,说明滚动条到底部了,此时便可以触发向服务端请求数据的ajax请求了. 判断滚动条是否滚动到底部: this.scrollHeight<=$(this).scrollTop()+$(this).height(

ajax加载更多和图片延时加载

//案例参考 http://www.woshipm.com/ 左侧查看更多jQuery(document).ready(function($){ var click_counter = 0; $('#pagination a').click(function(){ $("#pagination a").addClass("loading").text("数据加载中...请稍后"); if ( $("#pagination").

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

/** * @author wsf数据加载 */ ; var intervalId = null; (function (win,$){ $.myCache = { dataCache : {},//数据缓存 domOperCache:{}//dom操作缓存 } /** * js执行时间测试 */ function test(fn,param){ var s,d; s = new Date().getTime(); fn(param); d = new Date().getTime(); con

Android应用程序UI硬件加速渲染的预加载资源地图集服务(Asset Atlas Service)分析

我们知道,Android系统在启动的时候,会对一些系统资源进行预加载.这样不仅使得应用程序在需要时可以快速地访问这些资源,还使得这些资源能够在不同应用程序之间进行共享.在硬件加速渲染环境中,这些预加载资源还有进一步优化的空间.Android系统提供了一个地图集服务,负责将预加载资源合成为一个纹理上传到GPU去,并且能够在所有的应用程序之间进行共享.本文就详细分析这个预加载资源地图集服务的实现原理. 老罗的新浪微博:http://weibo.com/shengyangluo,欢迎关注! 资源预加载

JS图片预加载插件

在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片.预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 2)区别:两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载.懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力. 服务器端区别:懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数.预加载可以说是牺牲

Andorid上拉加载更多的几种实现方式

1.前言 Andriod中上拉加载更多的效果随处可见,因为一次性要展现的数据太多信息量太大的话,给用户的体验就很差(加载慢,界面卡顿.流量消耗大等),而加载更多可以控制每次加载条目的数量以达到快速加载,底部加载更多的方式就显得更人性化,今天就把用过的几种方式总结一下. 2.上拉加载更多的实现方式 ListView控件;作为一种传统列表展现的方式,ListView控件的addHeaderView(...).addFooterView(...)方法很方便的支持头布局.脚布局,参数就是打气筒打出来的布

下拉刷新与上拉加载更多

代码如下: /** * ListView下拉刷新和加载更多 * <p> * * <strong>变更说明:</strong> * <p> * 默认如果设置了OnRefreshListener接口和OnLoadMoreListener接口 * <p> * 剩余三个Flag: <br> * mIsAutoLoadMore(是否自动加载更多) <br> * mIsMoveToFirstItemAfterRefresh(下拉刷新后

利用CSS、JavaScript及Ajax实现图片预加载的三大方法

原文:3 Ways to Preload Images with CSS, JavaScript, or Ajax 译文:利用CSS.JavaScript及Ajax实现图片预加载的三大方法 预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性.

一种视频预加载的方案

转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/54234583 前言:视频的预加载是提高用户体验的重要因素.预加载成为网络视频播放不可或缺的一个技术环节.看下Agenda: 预加载的形式 影响预加载的因素 预加载场景 一张图看清本地代理 数据预加载 效果图 HttpProxy 预加载的形式: 1.边存边播:下载多少播放多少. 优点:快速加载播放,实现简单:缺点:不能拖动未存区域: