延迟加载

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

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. WORD神操作!第一个技巧你就傻眼了!

    原文:http://mp.weixin.qq.com/s?__biz=MzA4NzkyMDIwNw==&mid=220128483&idx=4&sn=cfa87c941f36f ...

  2. linux的rpm命令

    rpm 执行安装包二进制包(Binary)以及源代码包(Source)两种.二进制包可以直接安装在计算机中,而源代码包将会由 RPM自动编译.安装.源代码包经常以src.rpm作为后缀名. 常用命令组 ...

  3. UITableView优化技巧

    UITableView的简单认识 UITableView最核心的思想就是UITableViewCell的重用机制.简单的理解就是:UITableView只会创建一屏幕(或一屏幕多一点)的UITable ...

  4. nginx.conf配置及优化相关

    nginx.conf配置文件内容 user www www; worker_processes ; worker_rlimit_nofile ; error_log /data/nginx/logs/ ...

  5. PHP -- four arithmetic operation

    PHP 生成 简单四则运算. Thanks for Open Source. 本代码基于 jiaych php四则运算计算函数实现. <?php /*基于jiaych php四则运算计算函数 h ...

  6. linux 主机免验证登录

    1.ssh-keygen -t [rsa|dsa],将会生成密钥文件和私钥文件 id_rsa,id_rsa.pub或id_dsa,id_dsa.pub 2.scp -p port  ~/.ssh/id ...

  7. [转]Web性能监控自动化探索之路–初识WebPageTest

    本文转自:http://www.webryan.net/2013/01/use-webpagetest-to-analyze-web-performance/ 无论是从Velocity 2012还是在 ...

  8. css3 多列布局记

    css3 多列布局 多列布局属性: columns:column-widht和column-count的缩写. column-width:定义每列列宽度. column-count:定义分列列数. c ...

  9. css3 过渡记

    CSS3 过渡 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击,获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值. t ...

  10. 再次阅读《精通CSS-高级Web标准解决方案(第二版)》

    昨天(2015年11月21日) 在我们学校举行了大型招聘会.我面试了三家企业.有一家企业是先做笔试题的,做完后发现自己还是很多细节处理得不够.无论还有没有二面,我还是要重新把<精通CSS> ...