这篇文章主要介绍了javascript实现图片懒加载的方法及思路，有时我们需要用懒加载，也就是延迟加载图片的方式，来提高网站的亲和力,需要的朋友可以参考下！

一、定义

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

 二、呈现形式

【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>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

显示在浏览器可视区域的图片总是不能及时的刷出来，让在可视区域的图片立即加载进来，而让不在可视区域并且需要通过滚动条进行滚动显示的图片在图片滚动到可视区域内再显示出来

前端页面的用户体验对于一个网站来说是至关重要的，我们在访问一些图片量比较大的网站的时候，往往会有这样的感受：显示在我电脑屏幕可视区域的图片总是不能及时的刷出来，这就造成了对于一些没有什么耐心的用户而言，他们就不愿意多等下去，索性直接关闭了网站去看其他的网站，这就使得本网站的用户量的流失，这往往是一个网站最不愿意看到的情况，那么对于这样的情况而言，开发者们不断的努力，很快就想到了解决的方案，让在可视区域的图片立即加载进来，而让不在可视区域并且需要通过滚动条进行滚动显示的图片在图片滚动到可视区域内再显示出来，这就比一次性把所有的图片资源加载进来从而造成图片刷新较慢的用户体验好的多的多。

那么，图片延迟加载的技术具体如何实现呢？下面来做详细的介绍:

首先，定义图片为三列，一共有5行，具体代码如下：

里面用到的bootstrap的布局技术（当然，这不是重点），请看img标签中的src,一开始我们并没有给它具体的图片的资源路径，而是自己定义了一个属性 x-src，该属性的值是图片图片的资源路径，每一行的img都是如此，接下来，当页面载入的时候，我们使用jquery(当然，你想javascript原生的代码也可以，我这里只是为了省时间而已)来循环遍历每一个img，判断每一个图片是否在当前可视区域内，是则显示图片，否则稍后处理，这里需要知道三个数据：

注：因为我所写的是当图片的一半进入的浏览器的可视区域内才将这张图片进行加载，所以需要第            三 个数据，这个看个人的需求是什么，如果你的需求是图片只要已进入可视区域内就加载，可直接忽略            第三个数据!!!!

1：浏览器可视区域的高度

2：图片相对于文档的偏移量（这里只需要高度上的偏移量）

3：图片元素本身的高度

如果图片先对于文档的偏移量+图片元素本身的高度的一半    <  浏览器可视区域的高度，即表明图片已经有一半进入的可视区域了，那么我就应该要把这张图片加载进来了，可是img标签的src是为空的，x-src的值才是图片的资源路径，这个时候就需要用jquery将img 标签的x-src值传给src，从而将图片加载进来，具体实现代码如下：

具体的效果如下：

你可以在控制台看到，虽然我们有5行图片,每行有3列，但加载进来的图片只有第一列（图片高度有超出一半的img才会加载图片的资源进来），其他的都没有加载进来，这就使得图片的刷新会很快出现效果，那么接下来，用户需要看到更多的图片，这个时候需要进行滚动条往下滚动，去刷新更多的图片，那么这个时候我们除了上述的3个数据之外，还需要知道当前滚动条滚动的距离，如果：

图片先对于文档的偏移量+图片元素本身的高度的一半    <  浏览器可视区域的高度  + 当前滚动条滚动的距离，那么表明当前图片已经在可视区域内，并且图片有一半以上的高度是在可视区域内，那么将图片进行加载进来，具体代码如下：

具体效果如下：

在控制台你可以看到，随着滚动条的滚动，加载进来的图片由原来的三张变成了现在的六张，滚动条不断的往下滚动，图片就会不断的加载进来，从而得到更好的用户体验。

基于javascript实现图片懒加载（亲测有效）的更多相关文章

  1. JavaScript之图片懒加载的实现

    图片懒加载指的是在浏览过程中随着需要才被加载出来,例如某宝上面浏览商品时,会伴随很多的图片,如果一次全部加载出来的话,显然资源有些浪费,并且加载速度也会相对降低,那么懒加载的实现很重要.即随着浏览翻阅 ...

  2. javascript原生图片懒加载

    一,原生javascript图片懒加载 1. 使用方法,例如 // 要绑定的图片地址 <img data-src={url} alt=" "> 2. 在页面中引入下列原 ...

  3. 基于jquery的图片懒加载js

    function lazyload(option){ var settings={ defObj:null, defHeight: }; settings=$.extend(settings,opti ...

  4. 插件：★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js

    插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...

  5. [jQuery插件]手写一个图片懒加载实现

    教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...

  6. javascript图片懒加载与预加载的分析

    javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

  7. js, javascript 图片懒加载 实例代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. MUI - 基于plus.downloader的图片懒加载功能，支持本地缓存

    基于plus.downloader的图片懒加载功能,支持本地缓存 简单说一下 在app中,对一些变动不频繁的图片数据(如个人头像等),是需要存储在本地的.我相信这对大多数的app都是强需求的. 怎么使 ...

  9. JavaScript——图片懒加载

    前言 有一个朋友问我这个问题,刚好有时间,现在就简单的写个Demo~ github | https://github.com/wangyang0210/bky/tree/picLoadLazy 内容 ...

随机推荐

  1. artDialog测试

    artDialog测试 <script src="../Content/artDialog/v4/artDialog.source.js?skin=default">& ...

  2. delphi对象赋值

     Delphi的对象之间赋值主要要注意几个方面的问题:   1.对象之间的 :=赋值只是地址赋值,即是将当前对象的地址赋值到变量中,定义的变量可以是不用初始化的,在内存中两个变量指向的是同一地址空间: ...

  3. Java Hotspot G1 GC的一些关键技术

    G1 GC,全称Garbage-First Garbage Collector,通过-XX:+UseG1GC参数来启用,作为体验版随着JDK 6u14版本面世,在JDK 7u4版本发行时被正式推出,相 ...

  4. python学习之路-day1-python基础1

    本节内容: Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else ...

  5. TextFile 类的创写

    TextFile 作为自写的方法,继承自List<String>.像统计文本中出现的哪些单词,不重复等等,适合用Set集合完成统计. class TextFile extends Arra ...

  6. Win7启动修复（Ubuntu删除后进入grub rescue的情况）

    起因:装了win7,然后在另一个分区里装了Ubuntu.后来格掉了Ubuntu所在的分区.系统启动后出现命令窗口:grub rescue:_ 正确的解决方式: 1.光驱插入win7安装盘或者用USB启 ...

  7. [SmartFoxServer概述]SFS2X协议

    SFS2X 客户端-服务器协议 SFS2X使用了一种高效的二进制协议,这种协议可以使服务器在各方面都表现出色.消息通过客户端和服务器引擎得到快速转换,在带宽上传输可更加轻便.附加的即时压缩,能够在不影 ...

  8. [SmartFoxServer概述]使用文档

    如何使用文档和例子 这份文档提供了一份关于如何通过SmartFoxServer 2X(缩写SFS2X)文档掌握要点的快速教程.在使用例子和技术文档之前,我们建议先参考以下主题内容. 不管你是Smart ...

  9. sscanf函数用法详解

    sscanf() - 从一个字符串中读进与指定格式相符的数据. 函数原型: Int sscanf( string str, string fmt, mixed var1, mixed var2 ... ...

  10. 安装mysql数据库中的技巧、错误排查以及实用命令（持续更新）

    针对解压版本5.7.16(博主使用的这个版本.在某些低版本中部分命令失效) 一.初始化data目录(解压版解压后没有data目录) mysqld --initialize-insecure --use ...