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. POJ2976 Dropping tests（01分数规划）

    题目大概说给n个二元组Ai和Bi,要去掉k个,求余下的100*∑Ai/∑Bi的最大值. 假设要的最大的值是ans,令Di=Ai-ans*∑Bi,对Di排序取最大的n-k个,如果∑Ai-ans*∑Bi& ...

  2. excel VLOOKUP函数的使用方法 .

    VLOOKUP函数是Excel中几个最重函数之一,为了方便大家学习,兰色幻想特针对VLOOKUP函数的使用和扩展应用,进行一次全面综合的说明.本文为入门部分 一.入门级 VLOOKUP是一个查找函数, ...

  3. Android 定位地理坐标体系

    参考: 中国特色 火星坐标 iOS 火星坐标相关整理及解决方案汇总 百度地图坐标转换API 地球坐标系 (WGS-84) 到火星坐标系 (GCJ-02)百度坐标系 (BD-09) 的转换算法 火星坐标 ...

  4. Android 热补丁和热修复

    参考: 各大热补丁方案分析和比较 Android App 线上热修复方案 1. Xposed Github地址:https://github.com/rovo89/Xposed 项目描述:Xposed ...

  5. NOIp 2014 #4 无线网络发射器选址 Label:模拟

    题目描述 随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城市的布局为由严格平行的129 条东西向街道和129 条南北向街道所形成的网格状,并且相邻 ...

  6. [Leetcode] Permutation Sequence

    The set [1,2,3,…,n] contains a total of n! unique permutations. By listing and labeling all of the p ...

  7. HDU 1251 Trie树模板题

    1.HDU 1251 统计难题  Trie树模板题,或者map 2.总结:用C++过了,G++就爆内存.. 题意:查找给定前缀的单词数量. #include<iostream> #incl ...

  8. OO与设计模式的原则、目标

    OO与设计模式的原则.目标(转) 前两天,和一朋友聊到OO设计原则时,对设计模式有了更深的了解,在这里总结一下,与大家分享.OO(Object–Oriented )面向对象   OO方法(Object ...

  9. 使用audio标签播放音频文件

    HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中:<audio>标签.使用audio标签可以控制音频的播放与停止,循环播放与播放次数设置,以及播放位置等等. 例如 ...

  10. 用GruntJS合并、压缩CSS资源文件

    合并.压缩CSS资源文件用到了grunt-contrib-concat.grunt-css插件,自己npm就可以了,下面直接呈上package.json.Gruntfile.js代码 package. ...