JavaScript实现延迟加载图片

最新推荐文章于 2025-02-19 13:45:01 发布

原创最新推荐文章于 2025-02-19 13:45:01 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML

Web前端专栏收录该内容

85 篇文章

订阅专栏

博客涉及JavaScript和HTML相关信息技术内容，但具体内容未给出。

<!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(images/loading.png) center center no-repeat}
</style>
</head>
<body>
<div id="div">
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
<img src="" alt="" data-url="images/1.png" class="test"><br>
</div>
<script type="text/javascript">
var obj=document.getElementById("div").getElementsByTagName("img"),
h=window.innerHeight || document.documentElement.clientHeight;
for(var i=0;i<obj.length;i++){
    obj[i].url=obj[i].getAttribute("data-url");
    obj[i].top=obj[i].offsetTop;
    obj[i].flag=true;  //防止浏览器一直加载图片，这样图片加载成功后，滚动浏览器的时候就不会再加载图片了；
}
var fnLoad = function(obj){
    var t = document.body.scrollTop || document.documentElement.scrollTop; 
    if(t+h>obj.top+200&&obj.top>t){ //给个200为了提高让用户看到图片加载状态，更加友好
       setTimeout(function(){
         obj.src=obj.url;
         obj.flag=false;
       },100)
    }
}
window.onscroll = window.onload=function(){
    for(var i=0;i<obj.length;i++){
        if(obj[i].flag){
            fnLoad(obj[i]);
        }
    }
}
</script>
</body>
</html>