快速实现JS图片懒加载(可视区域加载)示例代码
作者：TNND
目前很多网站，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，下面本文就介绍了JS图片懒加载(可视区域加载)的实现方法，一起来看看吧。
js懒加载图片
如何提高网页加载速度？在网页中有许多img标签，这些标签就是图片，其属性src则是指向服务器地址，当浏览器从上往下读取到src标签中的地址时，浏览器就会开启线程，加载这张图片。而并不是等到整张页面都解析完成才加载图片。我们要做的就是加载用户可视范围内的图片。
js懒加载图片的目的
1.网页优化，提高网页加载速度
2.页面优化友好，提高SEO收录与排名
3.提高用户体验，减少服务器压力
实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片懒加载(可视区域加载)</title>
<style>
* {
padding: 0px;
margin: 0px;
}
html,
body {
width: 100%;
min-height: 100%;
}
#SB {
margin: 0;
padding: 0;
list-style: none;
}
#SB .in {
border: 1px solid red;
margin: 10px;
text-align: center;
height: 400px;
width: 400px;
float: left;
}
.in img {
border: none;
vertical-align: middle;
height: 400px;
width: 400px;
}
</style>
</head>
<body>
<ul id="SB">
<li class="in"><img src="" data-imgurl="img/1.jpg"></li>
<li class="in"><img src="" data-imgurl="img/2.jpg"></li>
<li class="in"><img src="" data-imgurl="img/3.jpg"></li>
<li class="in"><img src="" data-imgurl="img/4.jpg"></li>
<li class="in"><img src="" data-imgurl="img/5.jpg"></li>
<li class="in"><img src="" data-imgurl="img/6.jpg"></li>
<li class="in"><img src="" data-imgurl="img/7.jpg"></li>
<li class="in"><img src="" data-imgurl="img/8.jpg"></li>
<li class="in"><img src="" data-imgurl="img/9.jpg"></li>
<li class="in"><img src="" data-imgurl="img/10.jpg"></li>
<li class="in"><img src="" data-imgurl="img/11.jpg"></li>
<li class="in"><img src="" data-imgurl="img/12.jpg"></li>
<li class="in"><img src="" data-imgurl="img/13.jpg"></li>
<li class="in"><img src="" data-imgurl="img/14.jpg"></li>
<li class="in"><img src="" data-imgurl="img/15.jpg"></li>
<li class="in"><img src="" data-imgurl="img/16.jpg"></li>
<li class="in"><img src="" data-imgurl="img/1.jpg"></li>
<li class="in"><img src="" data-imgurl="img/2.jpg"></li>
<li class="in"><img src="" data-imgurl="img/3.jpg"></li>
<li class="in"><img src="" data-imgurl="img/4.jpg"></li>
<li class="in"><img src="" data-imgurl="img/5.jpg"></li>
<li class="in"><img src="" data-imgurl="img/6.jpg"></li>
<li class="in"><img src="" data-imgurl="img/7.jpg"></li>
<li class="in"><img src="" data-imgurl="img/8.jpg"></li>
<li class="in"><img src="" data-imgurl="img/9.jpg"></li>
<li class="in"><img src="" data-imgurl="img/10.jpg"></li>
<li class="in"><img src="" data-imgurl="img/11.jpg"></li>
<li class="in"><img src="" data-imgurl="img/12.jpg"></li>
<li class="in"><img src="" data-imgurl="img/13.jpg"></li>
<li class="in"><img src="" data-imgurl="img/14.jpg"></li>
<li class="in"><img src="" data-imgurl="img/15.jpg"></li>
<li class="in"><img src="" data-imgurl="img/16.jpg"></li>
<li class="in"><img src="" data-imgurl="img/1.jpg"></li>
<li class="in"><img src="" data-imgurl="img/2.jpg"></li>
<li class="in"><img src="" data-imgurl="img/3.jpg"></li>
<li class="in"><img src="" data-imgurl="img/4.jpg"></li>
<li class="in"><img src="" data-imgurl="img/5.jpg"></li>
<li class="in"><img src="" data-imgurl="img/6.jpg"></li>
<li class="in"><img src="" data-imgurl="img/7.jpg"></li>
<li class="in"><img src="" data-imgurl="img/8.jpg"></li>
<li class="in"><img src="" data-imgurl="img/9.jpg"></li>
<li class="in"><img src="" data-imgurl="img/10.jpg"></li>
<li class="in"><img src="" data-imgurl="img/11.jpg"></li>
<li class="in"><img src="" data-imgurl="img/12.jpg"></li>
<li class="in"><img src="" data-imgurl="img/13.jpg"></li>
<li class="in"><img src="" data-imgurl="img/14.jpg"></li>
<li class="in"><img src="" data-imgurl="img/15.jpg"></li>
<li class="in"><img src="" data-imgurl="img/16.jpg"></li>
</ul>
<script type="text/javascript">
var aImages = document.getElementById("SB").getElementsByTagName('img'); //获取id为SB的文档内所有的图片
loadImg(aImages);
window.onscroll = function() { //滚动条滚动触发
loadImg(aImages);
};
//getBoundingClientRect 是图片懒加载的核心
function loadImg(arr) {
for(var i = 0, len = arr.length; i < len; i++) {
if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad) {
arr[i].isLoad = true; //图片显示标志位
//arr[i].style.cssText = "opacity: 0;";
(function(i) {
setTimeout(function() {
if(arr[i].dataset) { //兼容不支持data的浏览器
aftLoadImg(arr[i], arr[i].dataset.imgurl);
} else {
aftLoadImg(arr[i], arr[i].getAttribute("data-imgurl"));
}
arr[i].style.cssText = "transition: 1s; opacity: 1;" //相当于fadein
}, 500)
})(i);
}
}
}
function aftLoadImg(obj, url) {
var oImg = new Image();
oImg.onload = function() {
obj.src = oImg.src; //下载完成后将该图片赋给目标obj目标对象
}
oImg.src = url; //oImg对象先下载该图像
}
</script>
</body>
</html>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。