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

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

发布时间 - 2026-01-10 22:18:28 点击率：次

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

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：讯飞晓医app体检报告上传方法

下一篇：GoDaddy的域名注册和网站建设服务如何结合使用？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：讯飞晓医app体检报告上传方法

下一篇：GoDaddy的域名注册和网站建设服务如何结合使用？