基于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 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 Javascript
微信小程序实现电子签名并导出图片
May 27 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
怎样在php中使用PDF文档功能
2006/10/09 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
php实现每日签到功能
2018/11/29 PHP
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
js尾调用优化的实现
2019/05/23 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
Python中使用partial改变方法默认参数实例
2015/04/28 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
python如何实现数据的线性拟合
2019/07/19 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
python实现的分层随机抽样案例
2020/02/25 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
python常量折叠基础知识点讲解
2021/02/28 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
元旦晚会邀请函
2014/02/01 职场文书
公司承诺书范文
2014/05/19 职场文书
法务专员岗位职责
2015/02/14 职场文书
民间借贷借条如何写
2015/05/26 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript