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. git merge 与 rebase 的区别

    http://gitbook.liuhui998.com/4_2.html merge rebase

  2. Trie UVA 11732 "strcmp()" Anyone?

    题目传送门 题意:询问所有字符串的比较次数和(注意for循环内的比较也算) 分析:将所有字符串插入到字典树上,然后结点信息记录有几个字符串,那么每走到一个结点就能知道比较到此时需要的次数.学习到链表存 ...

  3. JavaScript 参考手册——javascript本地和内置对象、BOM、DOM

    本部分提供完整的 JavaScript 参考手册: JavaScript 本地对象和内置对象 Browser 对象(BOM) HTML DOM 对象 JavaScript 对象参考手册 本参考手册描述 ...

  4. 【原】iOS学习之KVC原理

    1. KVC的实现原理 遍历字典里面所有的key,以name为例 去模型中查找有没有setName:方法,有就直接调用赋值 假如没有找到setName:方法,就会继续查找有没有_name属性,有就_n ...

  5. ACM Haffman编码

    Haffman编码 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 哈弗曼编码大家一定很熟悉吧(不熟悉也没关系,自己查去...).现在给你一串字符以及它们所对应的权值 ...

  6. UIView 的属性opaque详解

    该属性用法决定与该消息的接受者是否让其视图透明. 该属性的用处在于:给绘图系统提供一个性能优化开关. 当该值设计为YES,那么绘图系统会把它当作不透明看待,那么在执行绘图的时候会优化绘图一些操作,并且 ...

  7. [Cocos2D-x For WP8]Tile Map创建地图

    在Cocos2D-x里面创建Tile Map地图是需要用到.tmx的地图文件的,那么创建Tile Map地图文件,我们可以通过地图编辑器来创建,地图编辑器可以在网站:http://www.mapedi ...

  8. tableFooterView中的按钮点击没反应

    一,经历 1.查了按钮没有响应的几个方法,排除了是用户交互设置为 NO 的情况. 2.然后打印了一下tableFooterView,尽然发现其高度为0,而且我也没有设置 frame, 却可以显示按钮, ...

  9. ffmpeg常用命令

    windows http://www.cnblogs.com/wainiwann/p/4128154.html ubuntu http://blog.csdn.net/hellowxwworld/ar ...

  10. 爬虫_Crawler4j的使用

    Crawler4j的使用 (以下内容全部为转载,供自己查阅用) 下载地址: http://code.google.com/p/crawler4j/ Crawler4j的使用 网上对于crawler4j ...