JS页面数据懒加载_jq table数据懒加载-优快云博客

本文介绍了一种页面数据懒加载的实现方法，通过监测滚动事件判断特定div是否进入可视区域，进而触发ajax加载数据，有效提升页面加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面数据懒加载。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>

需要导入jquery文件
封装的不是很好，对于多的要加载的数据，比如有许多个div下的table要懒加载，就要设置对应的多个布尔值用于判断是否各个div是否加载，要申明个多变量（有多少个div就申明几个对应的变量）去获取他们距离屏幕顶部的高度然后做判断
目前使用的是该方法，有更好的方法的可以留言讨论，如果我又发现了更好的方法会持续更新