js滚动加载插件

时间：2021-01-03 21:11:26

function $xhyload(o){
var that=this;
if(!o){
return;
}else{
that.win=$(o.config.obj);
that.qpanel=$(o.config.oPanel);
that.loadding=$(o.config.loadding);
}
that.config=$.extend({},this.config,o.config);
that.win.scrollTop(0,0);
that.win.bind("scroll",that,that.scrollHandler);

}
$xhyload.prototype={
config:{obj:window,delay:500,curPos:0,oriPos:0,isScrolling:false,marginBottom:100,oPanel:"#visitor_con",loadding:"#loadding",func:null},
scrollHandler:function(e){
var edata=e.data;cfg=edata.config;
cfg.curPos=edata.win.scrollTop();
if($(window).height() + $(window).scrollTop() >= $(document.body).height() - cfg.marginBottom){
if (cfg.isScrolling == true) return;
cfg.isScrolling = true;
setTimeout(function () { cfg.isScrolling = false; }, cfg.delay);
if (cfg.curPos - cfg.oriPos > 0) {
$(edata.loadding).show(); //加载提示
setTimeout(function(){
cfg.func(function(data){
edata.qpanel.append(data);
});
$(edata.loadding).hide();
},500)
}
}
cfg.oriPos=cfg.curPos;
},
}
$xhyload.prototype.constructor=$xhyload;

var visitor=new $xhyload({config:{obj:window,oPanel:"#visitor_con",loadding:"#loadding",delay:500,func:$ue_visitor}});

//===================================

<!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>
<title>demo</title>
<script src="1.9.js" type="text/javascript"></script>
<style type="text/css">
div#Loadding { text-align: center; margin-top: 10px; display: none; font-weight: bold; color:Red; }
div.content { width: 100%; height: 1200px; border-bottom: 1px solid gray; font-weight: bold; color:Red;text-align: center;}
</style>
<script type="text/javascript">
if (!NeuF) var NeuF = {};
NeuF.ScrollPage = function (obj, options, callback) {
var _defaultOptions = { delay: 500, marginBottom: 100 }; //默认配置：延迟时间delay和滚动条距离底部距离marginBottom
options = $.extend(_defaultOptions, options);
this.isScrolling = false; //是否在滚动
this.oriPos = 0; //原始位置
this.curPos = 0; //当前位置
var me = this; //顶层
var $obj = (typeof obj == "string") ? $("#" + obj) : $(obj);
//绑定滚动事件
$obj.scroll(function (ev) {
me.curPos = $obj.scrollTop();
if ($(window).height() + $(window).scrollTop() >= $(document.body).height() - options.marginBottom) {
if (me.isScrolling == true) return;
me.isScrolling = true;
setTimeout(function () { me.isScrolling = false;}, options.delay); //重复触发间隔毫秒;
if (typeof callback == "function") callback.call(null, me.curPos - me.oriPos);
};
me.oriPos = me.curPos;
});
};
$(function () {
window.scrollTo(0, 0); //每次F5刷新把滚动条置顶
//marginBottom表示滚动条离底部的距离，0表示滚动到最底部才加载，可以根据需要修改
new NeuF.ScrollPage(window, { delay: 1000, marginBottom: 0 }, function (offset) {
if (offset > 0) {
$("#Loadding").show(); //加载提示
setTimeout(function () {
//这里就是异步获取内容的地方，这里简化成一句话，可以根据需要修改
$("#divContainer").append($("<div class='content'>第“" + ($(".content").size() + 1) + "”页内容</div>"));
//内容获取后，隐藏加载提示
$("#Loadding").hide();
}, 1000);
}
});
});
</script>
</head>
<body>
<div id="divContainer">
<div class="content">
这里是内容，尝试滚动，加载下一页内容。如果是大屏幕显示器，<br />请把CSS div.content 高度调高，以便看到滚动效果 </div>
</div>
<div id="Loadding">
正在加载，请稍候 ...</div>
</body>
</html>

随机推荐

  1. out和ref详解

    要想充分理解C# out和ref,必须先明确如下两个概念(对值类型与引用类型掌握比较好的,可以跳过"一.明确两个基本概念") 一.明确两个基本概念 值类型: 定义:通过值的方式来传 ...

  2. 2016年11月24日--面向对象、C&num;小复习

    面对对象就是:把数据及对数据的操作方法放在一起,作为一个相互依存的整体——对象.对同类对象抽象出其共性,形成类.类中的大多数数据,只能用本类的方法进行处理.类通过一个简单的外部接口与外界发生关系,对象 ...

  3. OpenJudge4980&colon;拯救行动&sol;&sol;stl优先队列

    总时间限制:  10000ms 内存限制:  65536kB 描述 公主被恶人抓走,被关押在牢房的某个地方.牢房用N*M (N, M <= 200)的矩阵来表示.矩阵中的每项可以代表道路(@). ...

  4. Spring 集成 RMI

    Maven <dependency> <groupId>org.springframework</groupId> <artifactId>spring ...

  5. （实用篇）php处理单文件、多文件上传代码分享

    php处理  单文件.多文件上传实例代码,供大家参考,具体内容如下 后台处理文件submit_form_process.php <?php /************************** ...

  6. Android Lock Screen Orientation

    一些与屏幕有关的基础知识: //这个是手机屏幕的旋转角度 final int rotation = this.getWindowManager().getDefaultDisplay().getOri ...

  7. android 49 广播接收者中启动其他组件

    main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" andro ...

  8. zoj 2067 White Rectangles

    这题解决的算法处理,真的很难想清楚!!尤其是最后的正矩形如何处理.不过终于看懂了 #include<stdio.h> #include<stdlib.h> #include&l ...

  9. matrix&lpar;&rpar;方法与translate&lpar;&rpar;、scale&lpar;&rpar;、rotate&lpar;&rpar;、skew&lpar;&rpar;方法的关系

    2D变换方法translate().scale().rotate().skew()与matrix()的关系举例介绍. 一.介绍 2D变换方法: translate():根据左(X轴)和顶部(Y轴)位置 ...

  10. 能自学成为WEB前端工程师吗？

    自学是大家学习一门it技术的时候,都会首先考虑的一种学习方式,web前端开发学习也是一样,但是自学web前端也是让大家充满疑问的一种学习方 自学是大家学习一门it技术的时候,都会首先考虑的一种学习方式 ...

相关文章