我们在写网页的时候怎么解决这个问题呢？这时候就要用到我们图片懒加载的问题，这样不仅可以
解决流量问题，也提高了性能等等。
下面我们就来看一下图片的懒加载怎么问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
}
html,body{
width: 100%;
height: 100%;
}
#p p{
width: 400px;
height: 500px;
/*border:1px solid #000;*/
display: inline-block;
margin:10px;
}
img{
width: 100%;
height: 100%;
}
</style>
<script>
// 获取距离父级距离
function getPos(obj) {
var t=0;//先声明两个变量 用来存储距离上面的高度 距离左边的高度
var l=0;
while (obj){//循环判断这个元素是否存在，存在才执行这个方法
t+=obj.offsetTop; // 加上距离父级的距离
l+=obj.offsetLeft;
obj=obj.offsetParent;// 有父级让他变成他的父级
}
return {left:l,top:t}; //把值传出去
}
window.onload=window.onscroll=function () {//滚动的时候和页面加载时执行的一样
var aImg=document.getElementsByTagName('img');//获取所有的元素img元素
var oSCrollT=document.body.scrollTop || document.documentElement.scrollTop;// 滚动条滚动高度
var oClh=document.documentElement.clientHeight;//可视区的高度
var oScr=oSCrollT + oClh; // 滚动条高度 + 可视区的高度
for(var i=0;i<aImg.length;i++){ //循环所有的img，把它距离页面顶部的距离 和 滚动高度+可视区的高度进行比较
if(oScr > getPos(aImg[i]).top){
aImg[i].src=aImg[i].getAttribute('_src'); //给src属性赋值
}
}
}
</script>
</head>
<body>
<p id="p">
<p><img _src="img/1.jpg"></p>
<p><img _src="img/2.jpg"></p>
<p><img _src="img/3.jpg"></p>
<p><img _src="img/4.jpg"></p>
<p><img _src="img/5.jpg"></p>
<p><img _src="img/6.jpg"></p>
<p><img _src="img/7.jpg"></p>
<p><img _src="img/8.jpg"></p>
<p><img _src="img/9.jpg"></p>
<p><img _src="img/10.jpg"></p>
<p><img _src="img/11.jpg"></p>
<p><img _src="img/12.jpg"></p>
<p><img _src="img/13.jpg"></p>
<p><img _src="img/14.jpg"></p>
<p><img _src="img/15.jpg"></p>
</p>
</body>
</html>
今天的内容就到这里，你学会了吗？
以上就是关于图片的懒加载的实例讲解的详细内容，更多请关注php中文网其它相关文章！
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
