原生JavaScript实现图片懒加载的原理与代码示例

原生JavaScript实现图片延时加载的原理与代码示例

本文介绍一种使用原生JavaScript实现图片延时加载的技术方案。虽然目前已有成熟的jQuery插件可供使用，且配置简便合理，但考虑到引入大型库可能增加页面负担，部分开发者倾向于自行编写轻量级实现。以下将分享一种自定义的实现思路与代码示例。

图片延时加载的主要优势在于节省服务器带宽消耗，并显著改善用户的浏览体验。特别是在图片资源丰富的网站中，这一优化手段显得尤为关键。接下来将深入探讨其工作原理及具体的代码实现细节。

图片延时加载原理

该技术的核心逻辑在于：HTML中的<img>标签初始src属性并不指向真实图片，而是指向一个占位图（如loading.gif）。真实图片地址被存储在自定义属性（例如data-url）中。当JavaScript监听到浏览器滚动条事件，并检测到图片进入可视区域时，脚本会将data-url中的真实地址赋值给src属性，从而触发图片加载。在实际项目中，这些地址通常通过Ajax异步获取并预先赋值给自定义属性。

原生JS实现图片延时加载实例：

纯文字描述可能较为抽象，因此提供一个简单的Demo供参考。以下是完整的代码实现，开发者可直接复制使用，通过阅读代码即可理解其工作机制。

<!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.gif) center center no-repeat}
</style>
</head>
<body>
<div id="div">
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" 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;
},500)
    }
}
window.onscroll = window.onload=function(){
for(var i=0;i<obj.length;i++){
if(obj[i].flag){
fnLoad(obj[i]);
        }
    }
}
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。