VIP福利
主页 > 建站问题 > 故障问题 > js图片延迟加载特效 图片懒加载lazyload代码实例

推荐文章

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

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

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

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

引入js文件:

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

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

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

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

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

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

1
2
3
4
5
<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",此时需要你修改对应的初始化代码:

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

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

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

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

layzload相关参数如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("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代码:

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

js代码:

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

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

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

1
2
3
4
<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也要添加些代码:

1
2
3
4
5
6
$(function() {
    $("div.lazy").lazyload();
    $("span.lazy").lazyload();
    $("p.lazy").lazyload();
    $("li.lazy").lazyload();
});

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