var one = true;//设置一个全局变量
$(window).scroll(function () {
var hight = document.body.scrollHeight - document.body.scrollTop - window.screen.height;//页面往下滚动的时候,定义最底部距离顶部的距离
hight = parseInt(hight);
if(one){//如果one = true继续往下执行
if(hight < window.screen.height){//当页面距离底部还有一屏距离的时候开始加载
one = false;//只能执行一次,加载完成之后再把one定义成true
console.log('继续向下加载');
}
}
});

JS滚动加载的更多相关文章

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

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

  2. js滚动加载小插件

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

  3. js滚动加载插件

    function $xhyload(o){ var that=this; if(!o){ return; }else{ that.win=$(o.config.obj); that.qpanel=$( ...

  4. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  5. JS懒加载

    4.如何使用js懒加载图片       a.懒加载图片是基于jquery.js的,所以: <script src="jquery.js" type="text/ja ...

  6. 记录WEUI中滚动加载的一个BUG

    最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...

  7. 潭州课堂25班:Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载,轮播图后台实现 (课堂笔记)

    新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...

  8. 滚动加载图片(懒加载)实现原理(这是旧实现,仅做为获取元素宽高api的参考)

    https://www.cnblogs.com/flyromance/p/5042187.html 本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载 ...

  9. 移动设备的HTML页面中图片实现滚动加载

    如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时, ...

随机推荐

  1. linux网卡配置

    6.3网卡配置 DEVICE=eth0 TYPE=Ethernet BOOTPROTO=dhcp ONBOOT=yes NETMASK=255.255.255.0 GETWAY=192.168.1.2 ...

  2. Oracle主键异常处理

    Hibernate: insert into test1.WarnWeather (WAREA, wdate, WDAYS, WINFO, WTYPE, WNO) values (?, ?, ?, ? ...

  3. 如何用好消息推送(JPush)为app拉新、留存、促活

    如何用好消息推送(JPush)为app拉新.留存.促活 作为移动端APP产品运营最重要的运营手段,消息推送(JPush)被越来越多的APP厂商所重视,在信息泛滥的移动互联网时代,手机APP应用安装得越 ...

  4. js获取浏览器宽高

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  5. 【SysML】用例图

    引言 对于系统工程师来说,设计用例图是一种极为常见的建模活动.用例图是一种黑盒视图,通过向读者传递一系列的用例以及相关的参与者,对系统对外提供的服务或系统具备的行为进行建模.在详细讨论SysML的用例 ...

  6. Linux下修改系统时区

    使用 /etc/localtime 文件修改时区 先查看一下当前的时区,下面这个例子中使用 UTC 即世界统一标准时区.假设你可能需要改为美国西部标准时间,即太平洋时间. # date Thu Aug ...

  7. T——SQL基础语句(定义变量,赋值,取值,分支,循环,存储过程)

    T--SQL基础语句 1.定义变量: declare @变量名 数据类型 ; declare @a int ; declare @b  nvarchar(10) ; 2.赋值: 法1:set @变量名 ...

  8. Android ORMLite 框架的入门用法

    大家在Android项目中或多或少的都会使用数据库,为了提高我们的开发效率,当然少不了数据库ORM框架了,尤其是某些数据库操作特别频繁的app:本篇博客将详细介绍ORMLite的简易用法. 下面开始介 ...

  9. 你可记得曾经的-------- C#面向对象的“基础”

    1.C#中构造函数定义的理解:     ①构造函数名与所在的类名相同     ②构造函数可以重载     ③构造函数可以带参数     ④构造函数没有返回值,且不允许写出void,可以有参也可以无参 ...

  10. Angular2发布思路(整理官网Deployment页面)

    本文是按着ng2官网的高级内容“Deployment”的思路整理得出的,原文虽然在angular2的中文站下挂着,截止目前却还是英文版未翻译,笔者就在这里结合自己的理解给出原文的一点点整理.这是原文地 ...