图片延迟加载

转载 (原文地址) mo.lm 随笔 javascrip 285阅读 2014-08-21 21:41:24 举报

[code]<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>

  • { margin: 0; padding: 0;}
    .list-img { width:1200px; margin:0 auto;}
    .list-img img { float:left; display:block; width:500px; margin: 0 20px 20px;}
    .list-img img:nth-child(even) { margin-right:0;}
    </style>
    <script>
    function getPos(obj){
    var t = 0;
    var l = 0;

    while(obj){
    t+=obj.offsetTop;
    l+=obj.offsetLeft;
    obj=obj.offsetParent;
    };

    return {top:t, left:l};
    };

window.onload=window.onscroll=function(){
var aImg = document.getElementsByTagName('img');

var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
var scrollBottom = scrollT+document.documentElement.clientHeight;

//document.title = scrollBottom;
for(var i=0; i<aImg.length; i++){
    var imgT = getPos(aImg[i]).top;

    if(scrollBottom >= imgT){
        aImg[i].src = aImg[i].getAttribute('_src');
    };
};

};
</script>
</head>

<body class="list-img">
<img _src="http://www.w3cfuns.com/data/attachment/album/201408/21/212744jmmabqia5qgrd5f5.jpg"; />
<img _src="http://www.w3cfuns.com/data/attachment/album/201408/21/212745pjnc445zvglq6i5j.jpg"; />
<img _src="http://www.w3cfuns.com/data/attachment/album/201408/21/212747k9616qmrrm6ecrq6.jpg"; />
<img _src="http://www.w3cfuns.com/data/attachment/album/201408/21/212749jvcsv28zvynrmtay.jpg"; />
<img _src="http://www.w3cfuns.com/data/attachment/album/201408/21/212751q3smjqttojhjq3kk.jpg"; />
<img _src="http://www.w3cfuns.com/data/attachment/album/201408/21/212753olk5pqnl4pwq8wxo.jpg"; />
<img _src="http://www.w3cfuns.com/data/attachment/album/201408/21/212754ca54m7zdd5zn7rac.jpg"; />
<img _src="http://www.w3cfuns.com/data/attachment/album/201408/21/212757zviy3du036ymd6tt.jpg"; />
<img _src="http://www.w3cfuns.com/data/attachment/album/201408/21/212759r18l13jofb5tjtbo.jpg"; />
</body>
</html>[/code]代码片段 1

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复