基于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使用eval解析json(js中使用json)
Jan 17 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
layui文件上传实现代码
May 20 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
ES6 解构赋值的原理及运用
May 25 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
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
python文字转语音实现过程解析
2019/11/12 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
python文件排序的方法总结
2020/09/13 Python
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
甜点店创业计划书
2014/01/27 职场文书
师恩难忘教学反思
2014/04/27 职场文书
党建目标管理责任书
2014/07/25 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
2015中学学校工作总结
2015/07/20 职场文书
创业计划书之美容店
2019/09/16 职场文书