图片懒加载
图片懒加载原理:前端工程师在做页面优化的时候,如果页面中是类似图片列表的结构,会考虑使用懒加载技术来优化页面的加载速度
在html页面里写,把js引入html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.div{
width: 500px;
margin: 0 auto;
}
img {
height: 100%;
width: 300px;
float: left;
border: 1px solid #000;
}
</style>
<body>
<div class="div">
<img src="./img/loading.jpg" alt="" data-src="./img/1_05.jpg">
<img src="./img/loading.jpg" alt="" data-src="./img/1_07.jpg">
<img src="./img/loading.jpg" alt="" data-src="./img/1_09.jpg">
<img src="./img/loading.jpg" alt="" data-src="./img/1_11.jpg">
<img src="./img/loading.jpg" alt="" data-src="./img/1_13.jpg">
<img src="./img/loading.jpg" alt="" data-src="./img/1_15.jpg">
<img src="./img/loading.jpg" alt="" data-src="./img/1_09.jpg">
</div>
</body>
<script src="./tu.js"></script>
</html>
js代码
function ljz() {
var image = document.getElementsByTagName('img')
var offsetTop = 0
var img1 = []
for (let i = 0; i < image.length; i++) {
var ele = image[i]
if (ele.getAttribute("data-src")) {
if (han(ele)) {
ele.src = ele.getAttribute('data-src');
} else {
img1.push(ele)
}
}
}
var img2 = img1.length
function add() {
for (let j = 0; j < img2; j++) {
var el = img1[j]
if (han(el)) {
(function (el) {
setTimeout(function () {
console.log(el)
el.src = el.getAttribute('data-src');
}, 2000)
})(el)
img1.splice(j, 1);
img2--;
if (img2 === 0) {
window.removeEventListener("scroll", add, false)
}
}
}
}
function han(ele) {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var cliteHeight = document.documentElement.clientHeight + 30
var height = cliteHeight + scrollTop
var offsetTop = ele.offsetTop
return (offsetTop < height)
}
window.addEventListener("scroll", add, false)
}
ljz()