快速实现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>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

# js # 图片懒加载原理 # 懒加载 # js实现图片懒加载 # js获取滚动距离的方法 # js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码 # js获取浏览器的可视区域尺寸的实现代码 # js获取元素到可视区的距离、浏览器窗口滚动距离及元素距离浏览器顶部距离 # 加载 # 就会 # 则是 # 中有 # 这张 # 要做 # 不支持 # 这篇文章 # 谢谢大家 # 往下 # 将该 # 整张 # 滚动条 # 文档 # 完成后 # 有疑问 # margin # title # padding # px

返回目录在线咨询

上一篇：家族网站制作干花文案怎么写,diy干花文案？
下一篇：GoDaddy自助建站平台支持哪些支付方式？如何设置在线支付功能？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

快速实现JS图片懒加载(可视区域加载)示例代码

您的项目需求