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 相关文章推荐
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
如何利用node转发请求详解
Sep 17 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中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
opencv+python实现均值滤波
2020/02/19 Python
Python使用Matlab命令过程解析
2020/06/04 Python
用python读取xlsx文件
2020/12/17 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
python wsgiref源码解析
2021/02/06 Python
新闻学毕业生自荐信
2013/11/15 职场文书
故宫英文导游词
2015/01/31 职场文书
质量保证书格式
2015/02/27 职场文书
四群教育工作总结
2015/08/10 职场文书
Redis Lua脚本实现ip限流示例
2022/07/15 Redis