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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
Angular的$http与$location
Dec 26 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
js实现简单数字变动效果
Nov 06 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
phpMyAdmin 安装及问题总结
2009/05/28 PHP
PHP 身份验证方面的函数
2009/10/11 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
独特的python循环语句
2016/11/20 Python
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
python 从list中随机取值的方法
2020/11/16 Python
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
怎样声明子类
2013/07/02 面试题
汽车广告策划方案
2014/05/31 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
事业单位个人总结
2015/02/12 职场文书
学生犯错保证书
2015/05/09 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
反邪教学习心得体会
2016/01/15 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis