快速实现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 相关文章推荐
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
javascript json 新手入门文档
Dec 03 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
js实现石头剪刀布游戏
Oct 11 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
基于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中调用SVN命令更新网站方法
2015/01/07 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
python 从远程服务器下载东西的代码
2013/02/10 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
python实现机器人行走效果
2018/01/29 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
python调用百度语音REST API
2018/08/30 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
中专生毕业自我鉴定
2013/11/01 职场文书
初中班级口号
2014/06/09 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
小学一年级学生评语大全
2014/12/25 职场文书