js图片延迟加载特效 图片懒加载lazyload代码实例

为什么要使用图片延迟加载？首要因素就是为了加快网页的打开速度，以最短的时间打开网页展现给浏览者面前，毕竟现在人可没那么多耐心等待一个网站花费大量时间加载，如果网页还没打开就被浏览者关闭了，可以说是最失败的事情了。

尤其是针对图片较多的网站，一个页面充斥着大量图片，如果图片还是未经压缩过的、尺寸比较大，那打开这个页面时间很是令人崩溃的。所以图片延迟加载就很必要了，随着用户向下滚动页面，只有当图片滚动到可视视窗内，或接近可视视窗时，这个图片才会从服务器加载，只加载网页可视区域的内容，看不到的区域的图片内容不加载，这样就能节省出大量的时间。

这里我们使用到的是一个js插件：jquery.lazyload.js，需要结合jQuery使用（注意：如果提示出错，看看你的jQuery版本是不是太低了，换个高版本的jQuery再次尝试）。

引入js文件：

<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js"></script>

在HTML中正常图片代码如下：

<img src="images/picture.jpg" alt="图片延迟加载" />

想给图片加上延迟加载特效，只需要做如下修改：

<img class="lazy" data-original="images/picture.jpg" alt="图片延迟加载" />

最后再引入初始化js代码：

<script type="text/javascript" charset="utf-8">
  $(function() {
      $("img.lazy").lazyload({effect: "fadeIn"});
  });
</script>

代码说明：我们为每个img标签中加上类class="lazy"标志，然后将src改成data-original；当初始化js代码加载后，图片进入网页可视区域后，js代码会找到所有带有类lazy标志的img标签，然后再将data-original中的数据即图片路径写入img标签，这样一张图片就会显示出来。出于优化考虑，为img标签加上alt属性，告知搜索引擎这是一张什么图片。

当然，为了省事也可以去掉img标签中的class="lazy"，此时需要你修改对应的初始化代码：

$("img").lazyload({effect: "fadeIn"});

上面代码会将该页面中所有img标签获取到，然后进行延迟加载操作。

note：如果想提前载入图片，比如在距可视区域100px前就开始加载数据，初始化代码需要写成下面这样：

$("img.lazy").lazyload({ threshold :180});

layzload相关参数如下：

$("img.lazy").lazyload({
  placeholder : "img/grey.gif", //用图片提前占位
    // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
  effect: "fadeIn", // 载入使用何种效果
    // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
  threshold: 200, // 提前开始加载
    // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
  event: 'click',  // 事件触发时才加载
    // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
  container: $("#container"),  // 对某容器中的图片实现效果
    // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
  failurelimit : 10 // 图片排序混乱时
     // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});

为背景图片添加延迟加载特效：

不要以为lazyload只能给img图片标签添加延迟加载特效，同样可以在背景图片上使用，二者使用方法很类似：

HTML代码：

<div class="lazy" data-original="img/pic.jpg" width="660" height="550"></div>

js代码：

$(function() {
    $("div.lazy").lazyload();
});

上面代码就实现了给div标签背景图片添加延迟加载特效的功能。

可能你会问如果我要给span、li等其他标签添加呢？其实很简单，看下代码就能明白：

<div class="lazy" data-original="img/pic.jpg" width="660" height="550"></div>
<span class="lazy" data-original="img/pic.jpg" width="660" height="550"></span>
<p class="lazy" data-original="img/pic.jpg" width="660" height="550"></p>
<li class="lazy" data-original="img/pic.jpg" width="660" height="550"></li>

对应js也要添加些代码：

$(function() {
    $("div.lazy").lazyload();
    $("span.lazy").lazyload();
    $("p.lazy").lazyload();
    $("li.lazy").lazyload();
});

也就是说，只要添加了对应标记，而且告诉lazyload()加载这个标签标记才会起作用。

代码下载：

jquery.lazyload.js

jquery-1.11.0.min.js

注意：谨慎给幻灯片特效图片添加延迟加载特效，只会加载第一张轮播图，其余的加载不了