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 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
理解JS事件循环
Jan 07 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 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报表之jpgraph柱状图实例代码
2011/08/22 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
简介Python中用于处理字符串的center()方法
2015/05/18 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Django--权限Permissions的例子
2019/08/28 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
化学教学随笔感言
2014/02/19 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
开学寄语大全
2014/04/08 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python