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


Posted in Javascript onJanuary 04, 2017

js懒加载图片

如何提高网页加载速度?在网页中有许多img标签,这些标签就是图片,其属性src则是指向服务器地址,当浏览器从上往下读取到src标签中的地址时,浏览器就会开启线程,加载这张图片。而并不是等到整张页面都解析完成才加载图片。我们要做的就是加载用户可视范围内的图片。

js懒加载图片的目的

     1.网页优化,提高网页加载速度

     2.页面优化友好,提高SEO收录与排名

     3.提高用户体验,减少服务器压力

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

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

实例代码如下:

<!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>

总结

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

Javascript 相关文章推荐
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
javascript操作referer详细解析
Mar 10 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 Javascript
JS实现百度搜索框
Feb 25 Javascript
基于jQuery实现选项卡效果
Jan 04 #Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 #Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 #Javascript
jQuery实现联动下拉列表查询框
Jan 04 #Javascript
JavaScript中String对象的方法介绍
Jan 04 #Javascript
js select下拉联动 更具级联性!
Apr 17 #Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 #Javascript
You might like
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
php实现分页显示
2015/11/03 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
python实现贪吃蛇小游戏
2020/03/21 Python
详解Python设计模式之策略模式
2020/06/15 Python
python 基于wx实现音乐播放
2020/11/24 Python
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
迎国庆演讲稿
2014/09/15 职场文书
委托证明书
2014/09/17 职场文书
办理护照工作证明
2014/10/10 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
客服专员岗位职责
2015/02/10 职场文书
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android
Go语言 详解net的tcp服务
2022/04/14 Golang
python playwright之元素定位示例详解
2022/07/23 Python