-
首先为什么要有图片懒加载:
使用图片懒加载的话就不会刚一打开页面就会把body中的所有图片都加载出来,这样可以 减少对http的请求,也可以优化代码,也可以让服务器去按需加载。 -
图片懒加载的思路:
就是说我们刚一打看页面的时候让他加载在可视区域内的内容,所以说我们可以使用一张加载中的图片先放在上面占位,之后通过滑动让我们本来要看到的有个图片在替换掉加载中的图片。 -
画一张图:
下来时代码(html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../js/00.js"></script>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
img {
height: 100%;
width: 5rem;
display: block;
margin: 0 auto;
border: 1px solid #000;
}
</style>
</head>
<body>
<img src="../img/loading.gif" alt="" data-src="../img/1.jpg">
<img src="../img/loading.gif" alt="" data-src="../img/2.jpg">
<img src="../img/loading.gif" alt="" data-src="../img/3.jpg">
<img src="../img/loading.gif" alt="" data-src="../img/4.jpg">
<img src="../img/loading.gif" alt="" data-src="../img/5.png">
<img src="../img/loading.gif" alt="" data-src="../img/6.jpg">
<img src="../img/loading.gif" alt="" data-src="../img/7.png">
</body>
<script src="../js/int.js"></script>
</html>
js代码:
function lanjiazai() {
var image = document.getElementsByTagName('img')
var offsetTop = 0
var img2 = []
for (let i = 0; i < image.length; i++) {
var ele = image[i]
if (ele.getAttribute("data-src")) {
if (load2(ele)) {
ele.src = ele.getAttribute('data-src');
} else {
img2.push(ele)
}
}
}
var img3 = img2.length
function handler() {
for (let j = 0; j < img3; j++) {
var el = img2[j]
if (load2(el)) {
(function (el) {
setTimeout(function () {
console.log(el)
el.src = el.getAttribute('data-src');
}, 2000)
})(el)
img2.splice(j, 1);
img3--;
if (img3 === 0) {
window.removeEventListener("scroll", handler, false)
}
}
}
}
function load2(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", handler, false)
}
lanjiazai()