使用JavaScript怎么实现懒加载页面数据

发布时间:2021-04-16 17:49:53 作者:Leah
来源:亿速云 阅读:153

这篇文章给大家介绍使用JavaScript怎么实现懒加载页面数据,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

<!-- 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怎么实现懒加载页面数据就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

推荐阅读:
  1. 使用JavaScript实现页面打印的方法
  2. 如何使用JavaScript实现页面中录音功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript

上一篇:使用OpenCV怎么实现一个人脸检测功能

下一篇:使用C语言怎么实现一个猜拳游戏

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》