jQuery实现的自动加载页面功能示例
本文实例讲述了jQuery实现的自动加载页面功能。分享给大家供大家参考，具体如下：
demo.html：
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>---------------</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵，水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵，水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵，水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵，水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵，水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵，水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵，水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵，水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>+++++++++++++++</p></li>
scrollpagination.js：
(function( $ ){
$.fn.scrollPagination = function(options) {
var opts = $.extend($.fn.scrollPagination.defaults, options);
var target = opts.scrollTarget;
if (target == null){
target = obj;
}
opts.scrollTarget = target;
return this.each(function() {
$.fn.scrollPagination.init($(this), opts);
});
};
$.fn.stopScrollPagination = function(){
return this.each(function() {
$(this).attr('scrollPagination', 'disabled');
});
};
$.fn.scrollPagination.loadContent = function(obj, opts){
var target = opts.scrollTarget;
var mayLoadContent = $(target).scrollTop()+opts.heightOffset >= $(document).height() - $(target).height();
if (mayLoadContent){
if (opts.beforeLoad != null){
opts.beforeLoad();
}
$(obj).children().attr('rel', 'loaded');
$.ajax({
type: 'POST',
url: opts.contentPage,
data: opts.contentData,
success: function(data){
$(obj).append(data);
var objectsRendered = $(obj).children('[rel!=loaded]');
if (opts.afterLoad != null){
opts.afterLoad(objectsRendered);
}
},
dataType: 'html'
});
}
};
$.fn.scrollPagination.init = function(obj, opts){
var target = opts.scrollTarget;
$(obj).attr('scrollPagination', 'enabled');
$(target).scroll(function(event){
if ($(obj).attr('scrollPagination') == 'enabled'){
$.fn.scrollPagination.loadContent(obj, opts);
}
else {
event.stopPropagation();
}
});
$.fn.scrollPagination.loadContent(obj, opts);
};
$.fn.scrollPagination.defaults = {
'contentPage' : null,
'contentData' : {},
'beforeLoad': null,
'afterLoad': null ,
'scrollTarget': null,
'heightOffset': 0
};
})( jQuery );
index.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/scrollpagination.js"></script>
<script type="text/javascript">
$(function(){
$('#content').scrollPagination({
'contentPage': 'demo.html', //你要搜索结果的页面
'contentData': {},//你可以通过 children().size() 知道哪里是分页
//谁该怎么滚动？在这个例子中，完整的窗口
'scrollTarget': $(window),
//在页面到达结束之前，从多少像素开始加载？
'heightOffset': 10,
//前负荷，一些功能，可能显示一个加载DIV
'beforeLoad': function(){
$('#loading').fadeIn();
},
'afterLoad': function(elementsLoaded){
//加载后，一些功能的动画结果和隐藏预载的div
$('#loading').fadeOut();
var i = 0;
$(elementsLoaded).fadeInWithDelay();
//如果超过100结果加载停止分页（仅用于测试）
if ($('#content').children().size() > 100){
$('#nomoreresults').fadeIn();
$('#content').stopScrollPagination();
}
}
});
//元件中的延迟元件的褪色代码
$.fn.fadeInWithDelay = function(){
var delay = 0;
return this.each(function(){
$(this).delay(delay).animate({opacity:1}, 200);
delay += 100;
});
};
});
</script>
</head>
<body>
<div id="demo">
<div style="height:2000px;"></div>
<ul id="content" style=" margin:0 auto; width:800px; color:#f60; background-color:eee;">
<li><p>内容开始</p></li>
</ul>
<div class="loading" id="loading">加载中</div>
<div class="loading" id="nomoreresults">结束了</div>
</div>
</body>
</html>
效果图如下：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
用jQuery模拟页面加载进度条的实现代码
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示. 首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 CSS 复制代码 代码如下: *{margin:0;padding:0;font-size:12px} .loading{position:relative;top:0;le
-
jquery实现在页面加载的时自动为日期插件添加当前日期
在页面加载的时候自动为日期插件添加当前日期. <script type="text/javascript"> $(document).ready(function(){ $("#startTime").val(formatDate()); $("#endTime").val(formatDate()); } jsp页面的body部分代码: <td><label>日期:</label></td&
-
Jquery实现页面加载时弹出对话框代码
复制代码 代码如下: <script type="text/javascript" src="jquery-1.4.2.js"></script> //下载 <script type="text/javascript"> $(document).ready(function(){ alert("您好,欢迎来到Jquery!"); }) </script> 将以上代码置于head标
-
jQuery Div中加载其他页面的实现代码
经过一翻尝试,终于找到了一个自大比较满意的解决方法,现写在自己的博客中与大家分享. 第一步需要在签核页面中提供一个区域用来显示表单内容,这里使用的是DIV. 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function() { loadPage("doc_view", "<?php echo $this->doc_view_url . '/flag/1';
-
jQuery页面加载初始化常用的三种方法
当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javascript" src="./js/jquery-1.7.min.js"></script> 复制代码 代码如下: <script type="text/javascript">
-
jquery加载页面的方法(页面加载完成就执行)
1.$(function(){ $("#a").click(function(){ //adding your code here }); }); 2.$(document).ready(function(){ $("#a").click(function(){ //adding your code here }); }); 3.window.onload = function(){ $("#a").click(function(){ //add
-
jquery 页面滚动到底部自动加载插件集合
很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPagination jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件. 2. jQuery Screw Screw (scroll + view) 是一个 jQuery 插件当用户滚动页面的时候加载内容,是一个无限滚动翻页的插件. 3
-
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu
-
基于jquery实现页面滚动到底自动加载数据的功能
现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由于它每次只加载一部分数据,当我们有大量的数据,但不能显示所有,这时我们可以考虑使用异步方式加载数据. 数据异步加载可以发生在用户点击"查看更多"按钮或滚动条滚动到窗口的底部时自动加载:在接下来的博文中,我们将介绍如何实现自动加载更多的功能. 图1 微博加载更多功能 正文 假设,在我们的数据库中存放着用户的消
-
jquery 图片预加载 自动等比例缩放插件
复制代码 代码如下: /* **************图片预加载插件****************** ///作者:没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来 可对图片进行是否自动缩放功能 此插件使用时可让页面先加载,而图片后加载的方式, 解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题 ///参数设置: scaling 是否等比例自动缩放 width 图片最大
-
基于JQuery实现滚动到页面底端时自动加载更多信息
关键代码: 复制代码 代码如下: var stop=true; $(window).scroll(function(){ totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); if($(document).height() <= totalheight){ if(stop==true){ stop=false;
-
运用JQuery的toggle实现网页加载完成自动弹窗
toggle()事件 它主要切换元素的可见状态. 1.toggle(switch) ①switch是一个可选值,如果不填则原来元素是显示则将其隐藏,如果是隐藏则显示. HTML 代码: 复制代码 代码如下: <p>Hello</p><p style="display: none">Hello Again</p> jQuery 代码: 复制代码 代码如下: $("p").toggle() 结果: 复制代码 代码如下: &