我是一名接触编程不久的小白，今天为大家带来这个案例，希望可以帮助到你。
懒加载是现在常见的的一种加载方式，是滑动到一定距离才加载新的数据，这样可以减少设备内存的负担。
话不多说，开始展示吧.
这个懒加载效果使用滚动条事件触发，每当滚动条触底一次就会将全部数据重新截取重新载入。每次向下滑动，距离顶部的距离都会改变，每一段距离需要截取的信息数量都不同，用当前距离顶部的高度值除以单条数据的高度（可能有时需要减去第二张图片的a值），再乘以每一行的的列数，就是当前距离顶部高度需要截取的信息数量。比如第二张图片中，我向下滑动了t像素的距离，就需要用t来除以每一张图片及下部文字盒子的高度，再乘以六列的6，就是当前距离需要截取的信息数量。需要注意我这个不是添加新的数据，而是将全部数据进行一重新截取，每一次截取数量大于上一次截取数量，来达到懒加载的效果。
代码如下：
上面两张的信息是使用Ajax请求的，这里为了方便诸位实验，我便将数据写入js里。
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>.box9 {margin: 0 auto;/* 动漫推荐 */width: 255px;height: 500px;/* border: rgb(182, 164, 0) 1px solid; */}.box9-1 {width: 255px;height: 50px;border: rgb(0, 0, 0) 1px solid;}.box9-1 span {position: absolute;margin-top: 15px;font-size: 24px;}.box9-2 {width: 255px;height: 450px;overflow: hidden;border: rgb(0, 0, 0) 1px solid;}.box9-2:hover {overflow-y: scroll;}.box9-3 {margin-top: 20px;width: 255px;height: 21px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;/* border: red 1px solid; */}</style><body><div class="box9"><div class="box9-1"><span>本周热度</span></div><div class="box9-2"><div class="box9-3"></div></div></div></body></html><script>let data = [ //本周热榜{word: '凡人修仙传'}, {word: '仙王的日常生活 第二季'}, {word: '爸妈来自二次元'}, {word: '王者？别闹！'}, {word: '烈火浇愁'}, {word: '萌妻食神'}, {word: '国王排名'}, {word: '鬼灭之刃 无限列车篇'}, {word: '世界顶尖的暗杀者,转生为异世界贵族'}, {word: '我被逐出队伍后过上慢生活'}, {word: '平家物语'}, {word: '宿命回响：命运节拍'}, {word: '通灵王'}, {word: '世界尽头的圣骑士'}, {word: '关于前辈很烦人的事'}, {word: '奇巧出租车'}, {word: '进化之实 踏上胜利的人生'}, {word: '黑色四叶草'}, {word: '鬼灭之刃'}, {word: '白沙的水族馆'}, {word: '大正少女御伽话'}, {word: '结城友奈是勇者 第三季 / 大满开之章'}, {word: '名侦探柯南'}, {word: '博人传 火影忍者新时代'}, {word: '咒术回战'}, {word: '迷宫标记者'}, {word: '男孩遇见女孩'},]let box9b = document.querySelector('.box9-2');let data1 = data.slice(0, 12);for (let i = 0; i < data.length; i++) {let arr = ''data1.forEach((b) => {arr += `<div class="box9-3">${b.word}</div>`});box9b.innerHTML = arr}box9b.onscroll = function() {let scrollHeight = document.querySelector(".box9-2").scrollHeight; //滚动条高度// 是div里内容的高度，根据内容的增加和减少变化。let scrollTop = document.querySelector(".box9-2").scrollTop; //可视高度// 是div内里框框的高度，是死的；let p = document.querySelector(".box9-2").clientHeight; //滚动条距离顶部高度// 是滚动条的最上端到，div上端内里框框的高度；if (p > 0) {console.log(p);console.log((p - 324) / 290);console.log("距顶部" + p + "可视区高度" + scrollTop + "滚动条总高度" + scrollHeight);}if (scrollHeight - p <= scrollTop) { //达成这个条件时滚动条触底let data2 = data.slice(0, scrollHeight / 30);let box9b = document.querySelector('.box9-2');for (let i = 12; i < data.length; i++) {let arr1 = '';data2.forEach((b) => {arr1 += `<div class="box9-3">${b.word}</div>`})box9b.innerHTML = arr1console.log("距顶部" + p + "可视区高度" + scrollTop + "滚动条总高度" + (scrollHeight - 1243));}}}</script>
![[06月]跳皮筋作文700字](https://700zi.400zi.cn/uploadfile/img/2024/06/11/5d6569f8c6ebae1ce134fe4ddcfec138.jpg)
