按需加载的第一次尝试 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>layImg</title>
<style>
*{ margin:0; padding:0;}
img{ display:block; width:200px; height:200px; background:#F6C}
</style>
</head>
<body>
<img _src="0.png" />
<img _src="1.png" />
<img _src="2.png" />
<img _src="3.png" />
<img _src="4.png" />
<img _src="5.png" />
<img _src="6.png" />
<img _src="7.png" />
<img _src="8.png" />
<img _src="9.png" />
<img _src="10.png" />
<img _src="11.png" />
</body>
</html>
<script type="text/javascript">
window.onload=function(){
    var scrTop=document.documentElement.scrollTop||document.body.scrollTop;
    var cHeight=document.documentElement.clientHeight;
    var cha    =cHeight+scrTop;
    var aImg=document.getElementsByTagName("img");
    for(var i=0;i<aImg.length;i++){
        if(!aImg[i].getAttribute("src")){
                if(aImg[i].offsetTop<=cha){
                    var src=aImg[i].getAttribute("_src");
                    aImg[i].setAttribute("src",src)
                }
            }
    }
    window.onscroll=function(){
        var scrTop=document.documentElement.scrollTop||document.body.scrollTop;
        var cha    =cHeight+scrTop;
        for(var i=0;i<aImg.length;i++){
            if(!aImg[i].getAttribute("src")){
                if(aImg[i].offsetTop<=cha){
                    var src=aImg[i].getAttribute("_src");
                    aImg[i].setAttribute("src",src)
                }
            }
        }
    }
}

</script>

原理很简单，滚动条的高度值和每一个没有src属性的图片的高度比较，但是这样一玩的话，图片的高度就得写死了，不然图片没有高度还求什么，其实还有bug的，例如，假如img在一个相对定位的div里面的话，它的offsetTop就是很小的，这样就会在不需求加载的时候加载了，这样问题其实是出在offsetTop上面的，明天写个方法，替换了它，名字就叫topToBody，呵呵

posted @ 2014-11-11 17:07  王子秦  阅读(180)  评论(0)    收藏  举报