JS实现页面数据懒加载


Posted in Javascript onFebruary 13, 2020

页面数据懒加载。Div移动到可视区域再去ajax加载内容。

最近有需求做页面的多个table用于加载数据,但是用户浏览页面的时候不需要一次将页面所有的东西加载出来,比如页面上3个table就占满了,用户点进去第一眼也就只能看到3个。为了防止一次加载拖慢了页面的速度,所以之后的table我们要懒加载。即该table移动到了可视区域再去异步请求加载数据。

以下为目前实现的方法:

<!-- page lazyloading -->
<script>
$(function(){
  // 设置布尔值用于判断是否该DIV到达过可视区域
 var scrollflaga = true;
  // 监听滚轮事件
 $(window).scroll(function() {
  // 要加载的DIV的ID
  // 距离可视区域顶部的距离
 var a = document.getElementById("myDiv").offsetTop;
 if (scrollflaga == true) {
    // 判断
    // $(window).scrollTop()为返回滚动条的垂直位置
    // $(window).height()代表了当前可见区域的大小,即你看到的浏览器显示范围
   if (a >= $(window).scrollTop() && a < ($(window).scrollTop()+$(window).height())) {
      // 如果到达了可视区域,则设置其布尔值为false,防止一直调用下面函数,即只做一次ajax请求
     scrollflaga = false;
      // 你的ajax请求函数
     loadingFunction();
 }
  }
}
</script>

1、需要导入jquery文件

2、封装的不是很好,对于多的要加载的数据,比如有许多个div下的table要懒加载,就要设置对应的多个布尔值用于判断是否各个div是否加载,要申明个多变量(有多少个div就申明几个对应的变量)去获取他们距离屏幕顶部的高度然后做判断

3、目前使用的是该方法,有更好的方法的可以留言讨论,如果我又发现了更好的方法会持续更新

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
3种js实现string的substring方法
Nov 09 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 #Javascript
原生JS与JQ获取元素的区别详解
Feb 13 #Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 #Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 #Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 #Javascript
node.js使用stream模块实现自定义流示例
Feb 13 #Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 #Javascript
You might like
PHP 中的类
2006/10/09 PHP
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
php录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
php实现mysql封装类示例
2014/05/07 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
js实现仿百度瀑布流的方法
2015/02/05 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
Python线性回归实战分析
2018/02/01 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
开服装店计划书
2014/08/15 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
高三毕业评语
2014/12/31 职场文书
烈士陵园观后感
2015/06/08 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏
React四级菜单的实现
2022/04/08 Javascript