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 相关文章推荐
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 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 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
详解php中反射的应用
2016/03/15 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
python进行TCP端口扫描的实现
2018/12/21 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
司法局火灾防控方案
2014/06/05 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
个人专业技术总结
2015/03/05 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书
二年级作文之动物作文
2019/11/13 职场文书
浅谈Python中对象是如何被调用的
2022/04/06 Python