jQuery实现的自动加载页面功能示例


Posted in Javascript onSeptember 04, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
jquery.ui.progressbar 中文文档
Nov 26 Javascript
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
jQuery简单实现中间浮窗效果
Sep 04 #Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 #Javascript
jQuery中ScrollTo用法示例
Sep 04 #Javascript
jQuery与JS加载事件用法分析
Sep 04 #Javascript
jQuery轮播图效果精简版完整示例
Sep 04 #Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 #Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 #Javascript
You might like
Zend的MVC机制使用分析(二)
2013/05/02 PHP
php数据库备份还原类分享
2014/03/20 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
numpy基础教程之np.linalg
2019/02/12 Python
浅析python内置模块collections
2019/11/15 Python
python如何调用php文件中的函数详解
2020/12/29 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
创业计划书——互联网商机
2014/01/12 职场文书
实习生求职自荐信
2014/02/07 职场文书
股权转让协议书
2014/04/12 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
新郎新娘致辞
2015/07/31 职场文书