这篇文章主要介绍了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. ORACLE 数据的逻辑组成

    数据块(block) Oracle数据块(Data Block)是一组连续的操作系统块.分配数据库块大小是在Oracle数据库创建时设置的,数据块是Oracle读写的基本单位.数据块的大小一般是操作系 ...

  2. iOS应用之微信支付集成－直接前端集成

    所有信息的生成都在前端完成,包括对订单进行sign签名以及MD5签名加密(此方法相对来说有些复杂,没有官方给的方法简单).注:官方给的是v3&v4支付流程,签名和加密都是在服务器端进行,由于没 ...

  3. vagrant 安装使用 win7

    第一步.安装VirtualBox和vagrant 下载地址: https://www.virtualbox.org/wiki/Downloads http://downloads.vagrantup. ...

  4. centos6.5 安装cmake 3.3.2

    os:centos6.5 cmake版本:3.3.2 安装编译源码所需的工具和库 yum install gcc gcc-c++ ncurses-devel perl 下载cmake 使用wget工具 ...

  5. oracle删除数据恢复

    分为两种方法:scn和时间戳两种方法恢复. 一.通过scn恢复删除且已提交的数据 1.获得当前数据库的scn号 select current_scn from v$database; (切换到sys用 ...

  6. LXC docker

    docker的原理和特点可以参照百度百科 http://baike.baidu.com/view/11854949.htm 昨天听到光照说docker技术实现, 既然可以轻量虚拟,是否可以多个虚拟出分 ...

  7. 解决Failed to load class "org.slf4j.impl.StaticLoggerBinder"

    Hibernate使用SLF4J API记录日志,所以在Hibernate的lib中,不再提供Log4J的包,而大部分框架依然使用Log4J记录日志,这样导致了兼容性问题. 解决办法,两步: 一.在编 ...

  8. select练习1

    1. 查询Student表中的所有记录的Sname.Ssex和Class列. select t.sname ,t.ssex , t.sclass from student t 2. 查询教师所有的单位 ...

  9. web标准：img图片在ie6下显示空白的bug解决方案

    在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”. 1.将图片转换为块级对象 ...

  10. JBOSS通过Apache负载均衡方法一：使用mod_jk

    JBOSS通过Apache负载均衡方法一:使用mod_jk   本文第一.二节分别对Linux环境下前端使用Apache以及windows环境下前端使用IIS通过AJP协议和后端的JBOSS通信实现负 ...