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 select操作的日期联动实现代码
Dec 06 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
js实现京东秒杀倒计时功能
Jan 21 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用GD库生成高质量的缩略图片
2011/03/09 PHP
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
解析php中的escape函数
2013/06/29 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
异步加载script的代码
2011/01/12 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
原生js二级联动效果
2017/06/20 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
整理Python中的赋值运算符
2015/05/13 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
学生个人求职自荐信格式
2013/09/23 职场文书
心理健康活动总结
2014/04/30 职场文书
投标保密承诺书
2014/05/19 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers