JS实现页面数据懒加载
更新时间：2020年02月13日 10:53:52 作者：铛铛当
这篇文章主要为大家详细介绍了JS实现页面数据懒加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
页面数据懒加载。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中使用参数个数实现重载功能,需要的朋友可以参考下2017-09-09
这篇文章主要为大家介绍了js常用的方法示例梳理总结及功能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了JavaScript大文件上传的处理方法之切片上传,切片上传的原理较为简单，即获取文件后切片，切片后整理好每个切片的参数并发请求即可2022-06-06
JavaScript+html5 canvas制作色彩斑斓的正方形效果
这篇文章主要介绍了JavaScript+html5 canvas制作色彩斑斓的正方形效果,实例分析了JavaScript结合html5 canvas实现图形动态绘制的技巧,需要的朋友可以参考下2016-01-01
鼠标事件的抓取实现代码，需要的朋友可以参考下。2010-04-04
这篇文章主要为大家详细介绍了如何通过JavaScript实现在线导出pdf文件,及office文件如何在线预览,感兴趣的小伙伴可以跟随小编一起学习一下2024-11-11
下面小编就为大家带来一篇js遍历获取表格内数据的方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
本篇主要是对js二维数组排序的简单示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
JavaScript 中实现 use strict的方法及优势
本教程将讨论JavaScript中的use strict特性,在这里,我们将通过不同的示例了解如何在JavaScript代码语句中创建和执行use strict关键字,需要的朋友可以参考下2023-09-09
本文详细介绍了如何在Uniapp中获取用户的地理位置,包括申请高德地图的Key、配置定位功能以及实现定位功能的代码示例,感兴趣的小伙伴跟着小编一起来看看吧2025-02-02
最新评论