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>

js滚动加载插件的更多相关文章

  1. js滚动加载小插件

    本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 少废话直接上代码!!!粗暴,直接,干脆 0//lk-2017-05-04 1(function($, win) { ...

  2. js 滚动加载iframe框中内容

    var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest; //滚动加载 var scrollLoad =function( ...

  3. JS滚动加载

    var one = true;//设置一个全局变量 $(window).scroll(function () { var hight = document.body.scrollHeight - do ...

  4. 页面滚动图片等元素动态加载插件jquery.scrollLoading.js

    如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的 ...

  5. jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

    jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...

  6. jQuery懒加载插件jquery.lazyload.js使用说明实例

    jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...

  7. JRoll 2 使用文档（史上最强大的下拉刷新，滚动，无限加载插件）

    概述 说明 JRoll,一款能滚起上万条数据,具有滑动加速.回弹.缩放.滚动条.滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费的轻量级html5滚动插件. JRoll第二版是 ...

  8. Js 之图片懒加载插件

    一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...

  9. 滚动加载|页面滑到底部加载数据|jquery.endless-scroll插件|使用demo

    <html> <head> <link rel="dns-prefetch" href="http://i.tq121.com.cn&quo ...

随机推荐

  1. iOS Cocoapods的pod install出现的某个错误 but they required a higher minimum deployment target.

    关于cocoapods的安装和使用的基本教程: http://my.oschina.net/vimfung/blog/182427?fromerr=j7l3DvCG   出现以下错误提示: Specs ...

  2. 由addOneMember引发的思考

    addOneMember是一个方法,这个方法在两处地方重复了. 所以在修改页面的时候,发现修改了一处,如果是新手,肯定不会注意到另外一处有问题,他如果没有看清楚这个类到底整体怎样,那么他会犯的错误是就 ...

  3. topcoder SRM 623 DIV2 CatAndRat

    解决本题的一个关键点就是当Cat进入时,此时Rat在哪个位置? 注意移动方向可以随时改变,由于是圆环,故离入口最远点的距离是pi*R,即圆的一半, 当cat进入时(cat的速度大于rat的速度,否则不 ...

  4. Codeforces Round #233 (Div. 2) B. Red and Blue Balls

    #include <iostream> #include <string> using namespace std; int main(){ int n; cin >&g ...

  5. [题解+总结]动态规划大合集II

    1.前言 大合集总共14道题,出自江哥之手(这就没什么好戏了),做得让人花枝乱颤.虽说大部分是NOIP难度,也有简单的几道题目,但是还是做的很辛苦,有几道题几乎没思路,下面一道道边看边分析一下. 2. ...

  6. 【BZOJ】2086: [Poi2010]Blocks

    题意 \(n(1 \le n \le 1000000)\)个数\(a_i(a_i \le 10^9)\).\(m(1 \le m \le 50)\)次询问,每次给出一个\(k(k \le 10^9)\ ...

  7. BZOJ3625: [Codeforces Round #250]小朋友和二叉树

    Description 我们的小朋友很喜欢计算机科学,而且尤其喜欢二叉树.考虑一个含有n个互异正整数的序列c[1],c[2],...,c[n].如果一棵带点权的有根二叉树满足其所有顶点的权值都在集合{ ...

  8. java&testng中Assert

    用testng中的assert做断言时,如果断言失败,则在当前方法中失败的语句后的语句将不会再执行: 如图: 看控制台输出语句:

  9. Apache Jmeter发送post请求

    下面用Jmeter发送一个post请求, 对应的js代码如下: $("#register_a").click(function() { var name = $("#un ...

  10. odoo 动态创建字段的方法

    动态创建字段并非一个常见的的需求,但某些情况下,我们确实又需要动态地创建字段. Odoo 中创建字段的方法有两种,一种是通过python文件class中进行定义,另一种是在界面上手工创建,odoo通过 ...