提示:
本文为移动端开发学习栏目:移动端开发学习02:懒加载——解释懒加载的使用
移动端开发学习02:懒加载——解释懒加载的使用
# 懒加载
HTML
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
height: 200px;
width: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
显示各个元素距离顶端的偏移量:
<script>
let divs = document.querySelectorAll('div');
for (let d of divs) {
console.log(d.offsetTop)
}
</script>
过滤距离顶端的偏移量大于窗口高度的元素
<script>
let divs = document.querySelectorAll('div');
let clientHeight = document.documentElement.clientHeight;
for (let d of divs) {
if (d.offsetTop>clientHeight){
console.log("不显示")
}else{
console.log("显示")
}
}
</script>
如果在div元素中放入图片,那么前几个元素在未往下翻找时,我们是看不到它的,既然如此也就不必着急加载。只要加载视口中出现的图片就可以。这就是懒加载的用处。
<body>
<div><img data-src="imgs/1.jpg" alt=""></div>
<div><img data-src="imgs/2.jpg" alt=""></div>
<div><img data-src="imgs/3.jpg" alt=""></div>
<div><img data-src="imgs/4.jpg" alt=""></div>
<div><img data-src="imgs/5.jpg" alt=""></div>
<div><img data-src="imgs/6.jpg" alt=""></div>
<div><img data-src="imgs/7.jpg" alt=""></div>
<div><img data-src="imgs/8.jpg" alt=""></div>
<div><img data-src="imgs/9.jpg" alt=""></div>
<div><img data-src="imgs/10.jpg" alt=""></div>
<div><img data-src="imgs/11.jpg" alt=""></div>
<div><img data-src="imgs/12.jpg" alt=""></div>
</body>
<script>
let imgs = document.querySelectorAll('img');
function lazyload(imgs) {
// 获取视口高度
let viewHeight=document.documentElement.clientHeight;
// 获取滚动条的高度
let scrollTop=document.documentElement.scrollTop;
// 遍历图片获取每个图片的offsetTop
for (let i = 0; i < imgs.length; i++) {
if (viewHeight+scrollTop>imgs[i].offsetTop){
imgs[i].src=imgs[i].getAttribute("data-src");
}
}
}
window.onload=function () {
lazyload(imgs);
}
window.onscroll=function () {
lazyload(imgs)
}
</script>
懒加载不能使用src属性,在页面渲染时src就自动加载。