原生JS JavaScript实现懒加载效果
我是一名接触编程不久的小白，今天为大家带来这个案例，希望可以帮助到你。
懒加载是现在常见的的一种加载方式，是滑动到一定距离才加载新的数据，这样可以减少设备内存的负担。
话不多说，开始展示吧.
这个懒加载效果使用滚动条事件触发，每当滚动条触底一次就会将全部数据重新截取重新载入。每次向下滑动，距离顶部的距离都会改变，每一段距离需要截取的信息数量都不同，用当前距离顶部的高度值除以单条数据的高度（可能有时需要减去第二张图片的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 = arr1
console.log("距顶部" + p + "可视区高度" + scrollTop + "滚动条总高度" + (scrollHeight - 1243));
}
}
}
</script>
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
二维码