延迟加载

$(window).scroll(function(){
var scrollHeight = $(document).height(); //文档高度
var scrollTop = $(this).scrollTop(); //滚动条卷去高度
var windowHeight = $(this).height(); // 窗口高度
// console.log(scrollHeight, scrollTop, windowHeight)
if(scrollHeight - scrollTop - windowHeight < 100 ){ console.log("到底了");
//ajax渲染页面
}
});
jQuery(function($){
var topicBoxTopHeight = jQuery('#topicBox').offset().top;
var topicBoxTopHeight_show = 1
$(window).scroll(function(event){ if($(this).scrollTop() > topicBoxTopHeight-$(window).height()-200 && topicBoxTopHeight_show==1){
topicBoxTopHeight_show=0;
topicBoxFn();
} });
})

jQuery scroll(滚动)延迟加载的更多相关文章

  1. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery scroll事件实现监控滚动条分页示例(转)

    这篇文章主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可 ...

  3. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

  4. 基于JQuery实现滚动到页面底端时自动加载更多信息

    基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...

  5. jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...

  6. 【学习】滚动延迟加载插件scrollLoading用法

    今天遇到一个很好用的滚动延迟加载的插件,作者是我的偶象大神张鑫旭,其博客为http://www.zhangxinxu.com/. 以前也写过这种效果,用的是lazyload,不过只能实现图片的加载.而 ...

  7. ios中iframe的scroll滚动事件替代方法

    在公众号的开发中,遇到ios中iframe的scroll滚动事件失效,在此做下记录. 因为接口获取的数据必须放在iframe中展示,滚动到底部按钮变亮,如图: 代码如下: <!DOCTYPE h ...

  8. jquery ajax 滚动加载数据

    jquery php 滚动加载数据(文件包 rollingpage) 效果如下: 页面加载时候($function(){ 自动加载第一页数据 }) 设置: var winH = $(window).h ...

  9. jQuery的滚动监听

    jQuery的滚动监听 1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offs ...

  10. jquery页面滚动显示浮动菜单栏锚点定位效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. UNIX标准化及实现之POSIX标准必需头文件

    POSIX标准定义的必需头文件 头文件 说明 <dirent.h> 目录项 <fcntl.h> 文件控制 <fnmatch.h> 文件名匹配类型 <glob. ...

  2. C#_自动化测试3_controll IE

    目前市面上有很多Web UI自动化测试框架,比如WatiN, Selinimu,WebDriver,还有VS2010中的Coded UI等等.  这些框架都可以操作Web中的控件,模拟用户输入,点击等 ...

  3. ajax生成html双引号问题

    //动态创建列表 function createLists(result){ var len=result.length,i; for(i=0;i<len;i++){ $myLi = $(&qu ...

  4. Android进阶笔记08:Android 中Activity、Window和View之间的关系

    1. Android 中Activity.Window和View之间的关系(比喻): Activity像一个工匠(控制单元),Window像窗户(承载模型),View像窗花(显示视图) LayoutI ...

  5. Inaccurate values for “Currently allocated space” and “Available free space” in the Shrink File dialog for TEMPDB only

    转载自:http://blogs.msdn.com/b/ialonso/archive/2012/10/08/inaccurate-values-for-currently-allocated-spa ...

  6. python(3)-队列

    队列分为双向队列和单向队列: 对于双向队列,同样需要先import collections 创建队列 >>> import collections >>> d = ...

  7. Shell学习笔记 - 运算符

    一.Declare命令 1. 命令格式 declare [+/-] [选项] 变量名 其中: -: 给变量设定类型属性 +:取消变量的类型属性 2. 参数说明 -i:将变量声明为整型 -a:将变量声明 ...

  8. hdu 1325 Is It A Tree?

    Is It A Tree? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  9. 使用CSS实现一个简单的幻灯片效果

    方法一: 简单的CSS代码实现幻灯片效果 方法二: 使用CSS3 Animation来制作幻灯片 方法一: 简单的CSS代码实现幻灯片效果 话不多说,直接上代码 <!DOCTYPE html&g ...

  10. css3 transition 实现图片放大缩小

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...