图片懒加载（转）

最新推荐文章于 2024-11-08 16:09:18 发布
agld94615
最新推荐文章于 2024-11-08 16:09:18 发布
阅读量79
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/holdonBestrong/p/6432987.html
版权
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生js懒加载</title>
<style type="text/css">
        div{width:100px;height:100px;background:#F00;margin-bottom:30px}
</style>
</head>
<body>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/001.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/002.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/003.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/004.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/040.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/005.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/006.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/007.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/008.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/009.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/010.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/011.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/012.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/013.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/014.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/015.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/016.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/017.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/018.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/019.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/020.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/021.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/022.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/023.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/024.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/025.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/026.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/027.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/028.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/029.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/030.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/031.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/032.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/033.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/034.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/035.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/036.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/037.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/038.png
    " src="a.gif" /></div>
    <div><img asrc="http://www.pokemon.name/w/image/Sprites/PDW/039.png
    " src="a.gif" /></div>
</body>


<script type="text/javascript">
        (function(){
                //common
                function tagName(tagName){
                        return document.getElementsByTagName(tagName);
                }
                function $(id){
                        return document.getElementById(id);
                }
                // addEvent(window,'scroll',lazyLoad);
                function addEvent(obj,type,func){
                        if(obj.addEventListener){
                                obj.addEventListener(type,func,false);        
                        }else if(obj.attachEvent){
                                obj.attachEvent('on'+type,func);
                        }
                }
                //建立某些参数
                var v={
                        eleGroup:null,
                        eleTop:null,
                        eleHeight:null,
                        screenHeight:null,
                        visibleHeight:null,
                        scrollHeight:null,
                        scrolloverHeight:null,
                        limitHeight:null
                }
                //对数据进行初始化
                function init(element){//先让第一屏显示
                        v.eleGroup=tagName(element)
                        screenHeight=document.documentElement.clientHeight;//可视区域高度
                        scrolloverHeight=document.body.scrollTop;//距离顶部滚动的像素
                        for(var i=0,j=v.eleGroup.length;i<j;i++){
                                if(v.eleGroup[i].offsetTop<=screenHeight && v.eleGroup[i].getAttribute('asrc')){
                                        v.eleGroup[i].setAttribute('src',v.eleGroup[i].getAttribute('asrc'));
                                        v.eleGroup[i].removeAttribute('asrc')
                                }        
                        }
                }
                function lazyLoad(){
                        if(document.body.scrollTop == 0){
                                limitHeight=document.documentElement.scrollTop+document.documentElement.clientHeight;
                        }else{
                                limitHeight=document.body.scrollTop+document.documentElement.clientHeight;
                        }
                        for(var i=0,j=v.eleGroup.length;i<j;i++){
                                if(v.eleGroup[i].offsetTop<=limitHeight && v.eleGroup[i].getAttribute('asrc')){
                                        v.eleGroup[i].src=v.eleGroup[i].getAttribute('asrc');
                                        v.eleGroup[i].removeAttribute('asrc')
                                }        
                        }
                }
                init('img')
                addEvent(window,'scroll',lazyLoad);
        })()
</script>


</html>