懒加载与节流
为什么需要懒加载：浏览器一个页面在图片很多的情况下，并不是页面中所有的图片都需要同时加载出来，而且同时加载出来增加了服务器的负担。这种情况下，用户看不见的图片可以不用加载出来。
原理：可视范围以下的图片用户看不见，因此在一开始可以不用加载。即页面卷曲值（document.documentElement.scrollTop|document.body.scrollTop）与可视区高度(window.innerHeight)之和小于该图片距页面顶部的距离(img.offsetTop)时可以不加载
优点：提高前端性能，提高页面加载速度，减少带宽。
实现：
<!DOCTYPE html>
<html lang="en">
<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>
<script src="index.js"></script>
<style>
img {
display: block;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<img src="images/a.jpg" alt="" data-src="images/1.jpg">
<img src="images/a.jpg" alt="" data-src="images/2.jpg">
<img src="images/a.jpg" alt="" data-src="images/3.jpg">
<img src="images/a.jpg" alt="" data-src="images/4.jpg">
<img src="images/a.jpg" alt="" data-src="images/5.jpg">
<img src="images/a.jpg" alt="" data-src="images/6.jpg">
<img src="images/a.jpg" alt="" data-src="images/7.jpeg">
<img src="images/a.jpg" alt="" data-src="images/8.jpeg">
<img src="images/a.jpg" alt="" data-src="images/9.jpeg">
<img src="images/a.jpg" alt="" data-src="images/10.jpeg">
<img src="images/a.jpg" alt="" data-src="images/b1.jpg">
<img src="images/a.jpg" alt="" data-src="images/b2.jpg">
<img src="images/a.jpg" alt="" data-src="images/b3.jpg">
<img src="images/a.jpg" alt="" data-src="images/b4.jpg">
<img src="images/a.jpg" alt="" data-src="images/b5.jpg">
<img src="images/a.jpg" alt="" data-src="images/b6.jpg">
</div>
</body>
</html>
window.onload = function () {
let img = document.querySelectorAll("img");
lazyLoad(img);
window.onscroll = function () { //每移动滚动条时触发懒加载函数
lazyLoad(img);
}
//懒加载
function lazyLoad(img) {
let s = document.body.scrollTop | document.documentElement.scrollTop;
let h = window.innerHeight;
for (let i =0; i < img.length; i++) {
console.log(img[i].offsetTop);
//当页面卷曲值与可视区域高度之和大于当前图片距页面顶部高度时，图片需要显示出来
if (s + h >= img[i].offsetTop) {
if (img[i].getAttribute("src") == "images/a.jpg") {
console.log(img[i].src);
img[i].src = img[i].getAttribute("data-src");
}
}
}
}
}
优化：函数节流，每次移动滚动条都触发lazyLoad函数影响浏览器性能，改为有时间函数setTimeout每隔一段时间触发lazyLoad函数以提高性能。
window.onload = function () {
let img = document.querySelectorAll("img");
let n=0; //防止每一次都从第一张图片开始检测
// console.log(img.length);
var timer;
lazyLoad(img);
window.onscroll = function () { //每移动滚动条时触发懒加载函数
if (!timer) {
timer=setTimeout(function(){
lazyLoad(img);
console.log(2);
timer=undefined;
},500);
}
}
//懒加载
function lazyLoad(img) {
let s = document.body.scrollTop | document.documentElement.scrollTop;
let h = window.innerHeight;
for (let i = n; i < img.length; i++) {
console.log(img[i].offsetTop);
//当页面卷曲值与可视区域高度之和大于当前图片距页面顶部高度时，图片需要显示出来
if (s + h >= img[i].offsetTop) {
console.log("i：" + i + " s：" + s, "h：" + h);
if (img[i].getAttribute("src") == "images/a.jpg") {
console.log(img[i].src);
img[i].src = img[i].getAttribute("data-src");
n=i+1;
}
}
}
}
}
浙公网安备 33010602011771号