基于javascript实现图片懒加载


Posted in Javascript onJanuary 05, 2016

一、定义

图片延迟加载也称为懒加载,延迟加载图片或符合某些条件时才加载某些图片,通常用于图片比较多的网页。可以减少请求数或者延迟请求数,优化性能。

 二、呈现形式

【1】延时加载,使用setTimeout或setInterval进行加载延迟,如果用户在加载前就离开,自然就不会进行加载。
【2】条件加载,符合某些条件或者触发了某些条件才开始异步加载。
【3】可视区域加载,仅仅加载用户可以看到的区域,这个主要监控滚动条来实现,一般距离用户看到的底边很近的时候开始加载,这样能保证用户下拉时图片正好接上,不会有太长时间的停顿。

 三、基本步骤

【1】网页中的图片都设为同一张图片
【2】给图片增加data-original = "img/test.jpg"的属性,保存图片的真实地址
【3】当触发某些条件时,自动改变该区域的图片的src属性为真实的地址 

四、应用

1、点击按钮显示图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
  margin: 0;
}
img{
  height: 100px;
  width: 100px;
}
</style>
</head>
<body>
<button>加载图片</button>
<img src="#" alt="测试" data-original = "img/test.png">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg = document.images[0];  
oBtn.onclick = function(){
  oImg.src = "img/loading.gif";
  if(oImg.dataset){
    aftLoadImg(oImg,oImg.dataset.original);  
  }else{
    aftLoadImg(oImg,oImg.getAttribute("data-original"));
  }
}
function aftLoadImg(obj,url){
  var oImg = new Image();
  oImg.onload = function(){
    obj.src = oImg.src;
  }
  oImg.src = url;
}
</script>  
</body>
</html>

2、可视区显示图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
  margin: 0;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
img{
  border: none;
  vertical-align: middle;
}
.in{
  border: 1px solid black;
  margin: 10px;
  text-align: center;
  height: 400px;
  width: 400px;
  float: left;
}
.in img{
  height: 400px;
  width: 400px;
}
</style>
</head>
<body>
<ul class="list">
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>  
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>              
</ul>

<script>
var oBtn = document.getElementsByTagName('button')[0];
var aImages = document.images;
loadImg(aImages);
window.onscroll = function(){
  loadImg(aImages);
};
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 = "transition: ''; opacity: 0;"
      if(arr[i].dataset){
        aftLoadImg(arr[i],arr[i].dataset.original);  
      }else{
        aftLoadImg(arr[i],arr[i].getAttribute("data-original"));
      }
      (function(i){
        setTimeout(function(){
          arr[i].style.cssText = "transition: 1s; opacity: 1;"
        },16)
      })(i);
    }
  }
}
function aftLoadImg(obj,url){
  var oImg = new Image();
  oImg.onload = function(){
    obj.src = oImg.src;
  }
  oImg.src = url;
}

</script>  
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,顺利实现javascript图片懒加载。

Javascript 相关文章推荐
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 #Javascript
基于javascript实现图片预加载
Jan 05 #Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 #Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 #Javascript
javascript简单比较日期大小的方法
Jan 05 #Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 #Javascript
简述jQuery ajax的执行顺序
Jan 05 #Javascript
You might like
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
js实现二级导航功能
2017/03/03 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
浅析Vue自定义组件的v-model
2017/11/26 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
Python读取mp3中ID3信息的方法
2015/03/05 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
python中update的基本使用方法详解
2019/07/17 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
药学专业个人的自我评价
2013/12/31 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android
Vue h函数的使用详解
2022/02/18 Vue.js
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript