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 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
详解webpack babel的配置
Jan 09 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 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
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
Python数组条件过滤filter函数使用示例
2014/07/22 Python
使用Python生成url短链接的方法
2015/05/04 Python
详解Python中for循环是如何工作的
2017/06/30 Python
python支持多继承吗
2020/06/19 Python
python爬取youtube视频的示例代码
2021/03/03 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
股票投资建议书
2014/05/19 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
广告业务员岗位职责
2015/02/13 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
尼克胡哲观后感
2015/06/08 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL