javascript图片延迟加载

最新推荐文章于 2024-07-18 21:12:10 发布

尜尜alp

最新推荐文章于 2024-07-18 21:12:10 发布

阅读量803

点赞数

分类专栏：原生js 文章标签： html 前端开发 web前端 javascript

原生js 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片延迟加载</title>
<style>
        img{display:block;width:350px;height:245px;background:url(img/loading-black.gif) center center no-repeat}
</style>
</head>
<body>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>

<script type="text/javascript">

var obj=document.getElementsByClassName("test"),i,t,h;
for(i=0;i<obj.length;i++){
        obj[i].url=obj[i].getAttribute("data-url");
        obj[i].o=obj[i].offsetTop;
        obj[i].again=false;  //防止浏览器一直加载图片，这样图片加载成功后，滚动浏览器的时候就不会再加载图片了；
}
h=document.documentElement.clientHeight||900;

var test= function(obj){
        t=document.body.scrollTop || document.documentElement.scrollTop;
        if(t+h>obj.o&&obj.o>t){
       setTimeout(function(){
               obj.src=obj.url;
        obj.again=true;
       },500)
       
    }
}

window.οnscrοll=window.οnlοad=function(){

        for(i=0;i<obj.length;i++){
                        if(!obj[i].again){
                                test(obj[i]);
                        }
        }

        };
</script>
</body>
</html>

尜尜alp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript图片延迟加载

图片延迟加载 img{display:block;width:350px;height:245px;background:url(img/loading-black.gif) center center no-repeat}var obj=document.getElementsByClassName("test"),i,t,h;
复制链接

扫一扫