图片懒加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片懒加载</title>
<style>
.parent{
display: flex;
flex-direction: column;
}
.parent img{
width: 500px;
height: 400px;
}
.parent img:nth-child(even){
background-color: #E5C997;
}
.parent img:nth-child(odd){
background-color: #DDDDDB;
}
</style>
</head>
<body>
<h3>实现图片懒加载</h3>
<div class="parent">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
</div>
<script>
"use strict";
let imgs = document.querySelectorAll("img");
function sendAjax(url){
return new Promise((resolve, reject)=>{
let xhr = new XMLHttpRequest();
xhr.open('post', url);
xhr.setRequestHeader("Content-type", "application/x-www-from-urleacoded");
xhr.send();
xhr.onreadystatechange = ()=>{
if(xhr.readyState === 4){
if(xhr.status===200){
resolve(xhr.responseText);
}else{
reject(xhr.status);
}
}
}
})
}
async function caculate(){
// 显示窗口高度
let clientH = document.documentElement.clientHeight;
// 显示窗口顶部距离浏览器顶部的距离
let scrollT = document.documentElement.scrollTop || document.body.scrollTop;
// 显示窗口底部距离浏览器顶部的距离
let bottonT = clientH + scrollT;
// 检测
console.log(clientH, scrollT);
for(let i=0; i<imgs.length; i++){
let head = imgs[i].src.substr(0, 4)
if(imgs[i].offsetTop <= bottonT && head!=="data"){
let j = i + 1;
let url = "./resources/pic"+j+".json";
let result = await getData(url);
let rr = JSON.parse(result)
imgs[i].src = rr.data;
if(i===imgs.length-1){
clearInterval(timer);
}
}
}
}
caculate();
var timer = setInterval(()=>{
caculate();
}, 1000)
async function getData(url){
let data = await sendAjax(url);
return data;
}
</script>
</body>
</html>
