<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片进行懒加载</title>
<style>
img{
display: block;
margin-bottom: 50px;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img src="img/1.gif" data-src="img/1.jpg" alt="pic">
<img src="img/1.gif" data-src="img/2.jpg" alt="pic">
<img src="img/1.gif" data-src="img/3.jpg" alt="pic">
<img src="img/1.gif" data-src="img/4.jpg" alt="pic">
<img src="img/1.gif" data-src="img/5.jpg" alt="pic">
<img src="img/1.gif" data-src="img/6.jpg" alt="pic">
<img src="img/1.gif" data-src="img/7.jpg" alt="pic">
<img src="img/1.gif" data-src="img/8.jpg" alt="pic">
<script>
// let num = document.getElementsByTagName('img').length;
// let img = document.getElementsByTagName('img');
// let n = 0;
// lazyload();
// window.onscroll = lazyload;
// function lazyload(){
// let seeHeight = document.documentElement.clientHeight; // 可见区域
// let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// for (let i = n; i<num;i++){
// if(img[i].offsetTop < seeHeight + scrollTop) {
// if (img[i].getAttribute('src') == 'img/1.gif') {
// img[i].src = img[i].getAttribute('data-src');
// }
// n = i + 1;
// }
// }
// }
</script>
<script>
// onload是等所有的资源文件加载完毕以后再绑定事件
window.onload = function(){
// 获取图片列表，即img标签列表
var imgs = document.querySelectorAll('img');
// 获取到浏览器顶部的距离
function getTop(e){
return e.offsetTop;
}
// 懒加载实现
function lazyload(imgs){
// 可视区域高度
var h = window.innerHeight;
//滚动区域高度
var s = document.documentElement.scrollTop || document.body.scrollTop;
for(var i=0;i<imgs.length;i++){
//图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
if ((h+s)>getTop(imgs[i])) {
// 真实情况是页面开始有2秒空白，所以使用setTimeout定时2s
(function(i){
setTimeout(function(){
// 不加立即执行函数i会等于9
// 隐形加载图片或其他资源，
//创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载
var temp = new Image();
temp.src = imgs[i].getAttribute('data-src');//只会请求一次
// onload判断图片加载完毕，真是图片加载完毕，再赋值给dom节点
temp.onload = function(){
// 获取自定义属性data-src，用真图片替换假图片
imgs[i].src = imgs[i].getAttribute('data-src')
}
},2000)
})(i)
}
}
}
lazyload(imgs);
// 滚屏函数
window.onscroll =function(){
lazyload(imgs);
}
}
</script>
</body>
</html>
|