失眠网 > 原生JS实现页面滚动到底部时自动加载数据效果

原生JS实现页面滚动到底部时自动加载数据效果

时间：2021-08-13 10:07:35

在我们日常开发中为了避免一次性数据加载量过大，而导致页面加载缓慢，运行卡顿。通常会使用懒加载进行按需加载，在提高项目运行流畅度的同时也可以增加用户体验。懒加载有很多场景很多方式，那么今天就教大家如何一个原生js实现页面懒加载的方式，也就是当滚动到页面最底部时会触发回调去请求数据。

当原生的理解后，对于我们后续使用框架开发的遇到类似情况也会更加容易变通和实现。

看代码

引入Axios

<script src="/ajax/libs/axios/1.1.3/axios.min.js"></script>

CSS部分

HTML+Javascript部分

<body><h2>王者英雄列表</h2><div class="row"><ul class="list_contrant"></ul><div class="base_Anime"><i class="Loading_animation"></i></div><h6>暂无更多数据</h6></div><script>const General = document.querySelector(".list_contrant"); // 获取ulconst base_Anime = document.querySelector(".base_Anime"); // 获取加载元素const noData = document.querySelector("h6"); // 暂无数据let requestNumeric = 1; // 每次请求数据的id值let jointSum = ""; // li内容async function getHeroInfo(requestNumeric) {let data = (await axios({method: "get",url: `http://localhost:3000/posts/${requestNumeric}` // ${requestNumeric} 请求数据的id})).datadata.data.forEach(element => {jointSum +=`<li class="cidPage_Separate "><div class="groundFloor_imgUrl"><img src=${element.img_url} alt=""></div><div class="hero_name">${element.hero_name}</div><p class="hero_introduce"><b>英雄台词：</b>${element.hero_introduce}</p></li>`});General.innerHTML = ""; // 先将原来的ul中内容置空General.innerHTML = jointSum; // 加入新的内容base_Anime.style.display = "none"; // 将动画元素隐藏}getHeroInfo(1); // 第一次加载时默认调用一次let flat = true; // 设置节流的开关阀门window.addEventListener("scroll", () => { // 监听浏览器窗口滚动if (requestNumeric > 6) { // 请求id大于6时已经没有数据，则停止请求base_Anime.style.display = "none"; // 关闭 -- 加载动画noData.style.display = "block"; // 打开 -- 暂无数据文字return;};if (General.getBoundingClientRect().bottom < document.documentElement.clientHeight) { // 当页面主元素底部到浏览器顶部高度位置小于浏览器总高度if (!flat) return; // 节流 -- 判断阀门是否开着flat = false; // 进来后关闭阀门setTimeout(() => {requestNumeric++; // 增加下次请求的idgetHeroInfo(requestNumeric); // 调用请求数据的函数flat = true; // 每过1秒开启一次阀门（允许请求加载数据）}, 1000)base_Anime.style.display = "block"; // 显示加载动画}})</script></body>

看效果

总结以下知识重点

getBoundingClientRect() 获取当前元素在页面中的所有距离信息

bottom:对象底部距离浏览器当前可视顶部的距离height:该对象的高度left:对象距离浏览器可视最左侧的距离right:对象距离浏览器可视最右侧的距离Top: 对象顶部距离当前浏览器可视顶部的距离width:当前对象宽度x:对象左侧距离浏览器可视左侧距离y:对象顶部距离浏览器可视顶部水平

General.getBoundingClientRect().bottom // 获取元素底部到浏览器顶部的距离< document.documentElement.clientHeight // 获取浏览器高度// 当页面主元素底部到浏览器顶部高度位置小于浏览器总高度，则触发回调去加载数据

看图更能理解滚动距离监听

如果没有接口的也阔以看我上一篇json-serve的介绍，可以自己写一个小的数据库接口供测试使用，以上的数据便是使用json-serve写的，非常方便且利于理解。

希望能够有所帮助！

如果觉得《原生JS实现页面滚动到底部时自动加载数据效果》对你有帮助，请点赞、收藏，并留下你的观点哦！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。