在这先说一下什么叫做懒加载，懒加载就是延尺加载。而什么时候要用到延迟加载呢，答案就是当我们所访问的页面数据量过大的时候，明显用缓存不太合适的时候。
因为内存有限，为了减少并发量，减少系统资源的消耗成了必然。我们只有让数据在需要的时候才进行加载。就像浏览大量图片的网页的时候我们如果不用懒加载的方
式，会降低用户的体验（顾客是上帝吗）；
而说到图片的懒加载的方式就是
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
display: block;
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div id="banner">
<img data-src="image/01.jpeg">
<img data-src="image/02.jpeg">
<img data-src="image/03.jpeg">
<img data-src="image/04.jpeg">
<img data-src="image/05.jpg">
</div>
<script type="text/javascript">
window.onload=function(){
var banner=document.getElementById("banner");
var imgs=banner.getElementsByTagName("img");
add();//页面加载完成先执行一次
function getTop(obj){ //写一个方法获取图片距离top的值
var t=0; //定义一个保存top值的 变量
while(obj){ //循环获取每个父级定位的top值
t+=obj.offsetTop; //获取传入或改变父级定位的top值，当到大body的时候没有 他的父级定位为null所以就停了
obj=obj.offsetParent; //获取obj的父级定位
console.log(t)
console.log(obj)
}
return t;
}
function add(){
var S = document.documentElement.scrollTop || document.body.scrollTop; //获取滑动条距top的值
var H = window.innerHeight; //获取显示区域高度（只读）
for(var i=0;i<imgs.length;i++){ //循环图片
if((S+H) > getTop(imgs[i])){ 判断图片是否进入可视区域
imgs[i].setAttribute("src",imgs[i].getAttribute("data-src")); //当进入的时候给src 赋值
}
}
}
window.onscroll=function(){ //每次滚动运行方法判断
add()
}
}
</script>
</body>
</html>
这样就可以有效的解决我们加载时的用户的体验了；
时间： 2024-10-03 23:15:46