您的位置：首页 > Web前端 > JavaScript

js 图片延时加载

2015-09-09 15:49 716 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com">
<meta name="copyright" content="智能社 - zhinengshe.com">
<title>智能社 - www.zhinengshe.com</title>
<style>
* { margin:0; padding:0; }
li { float:left; width:310px; height:310px; border:1px solid red; list-style:none; margin:5px; }
</style>
<script>
window.onload=window.onresize=window.onscroll=function (){
var aImg=document.getElementsByTagName('img');
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
var scrollBottom=document.documentElement.clientHeight+scrollTop;//可是区域高度+滚动高度

for (var i=0; i<aImg.length; i++)
{
var top=getPos(aImg[i]).top;

if (top<scrollBottom)
{
// 图片在可视区内
aImg[i].src=aImg[i].getAttribute('_src');
}
}
};

function getPos(obj){
var l= 0;
var t= 0;
while(obj){
l += obj.offseLeft;
t += obj.offsetTop;
obj = obj.offseParent;
}
return {left:l,top:t};
}
</script>
</head>

<body>
<ul>
<li><img _src="images/m1.jpg" /></li>
<li><img _src="images/m2.jpg" /></li>
<li><img _src="images/m3.jpg" /></li>
<li><img _src="images/m4.jpg" /></li>
<li><img _src="images/m5.jpg" /></li>
<li><img _src="images/m6.jpg" /></li>
<li><img _src="images/m7.jpg" /></li>
<li><img _src="images/m8.jpg" /></li>
<li><img _src="images/m9.jpg" /></li>
<li><img _src="images/m10.jpg" /></li>
</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航