基于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 相关文章推荐
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
JS实现简易留言板特效
Dec 23 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 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实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
javascript event 事件解析
2011/01/31 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
酒店总经理欢迎词
2014/01/15 职场文书
抽样调查项目计划书
2014/04/24 职场文书
推荐信格式要求
2014/05/09 职场文书
临床专业自荐信
2014/06/22 职场文书
个人投资合作协议书
2014/10/12 职场文书
办公室文员岗位职责
2015/02/04 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android