图片延迟加载技术-Lazyload的应用

2011年12月09日 16:13helloweba.com 作者:月光光 标签:jQuery 

我们在浏览图片量非常大的页面时,像淘宝商城商品展示、必应图片搜索这类网站,图片的加载非常流畅,其中就应用了图片延迟加载技术。本文讲解Lazyload图片加载插件,当我们打开页面时,首先在屏幕可视区域加载完图片,随着向下滚动页面,图片会陆续加载,从而提升了页面打开速度。

Lazyload是一款基于jQuery的插件,在要显示大量图片的页面,图片是按需加载的,只在浏览器可视区内加载图片,当用户使用滚动条下拉时,后面的图片才会继续加载,从某种意义上讲,这种技术减少了服务器的负载。您可以到Lazyload官网下载最新的版本:http://www.appelsiini.net/projects/lazyload

HTML

首先载入jquery库和lazyload插件:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>

在body中需要放置图片的区域放置多个要显示的图片。图片越多效果越明显。

<img src="images/blank.gif" data-original="images/01.jpg" width="205" height="188" alt="" />

注意,每张图片的src属性对应的是一张预定义的图片,就是再真正的图片还没加载的时候的替代图片,我们通常使用1x1的blank.gif图片。真正的图片是由属性data-original指定的,然后还需要设置图片的宽度和高度。

jQuery

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

和许多插件使用一样,只需要在元素上调用lazyload()即可,现在你就可以看到效果了。Lazyload同样提供了多个参数可设置不同的效果。

threshold:灵敏度,即可以通过设置灵敏度来控制图片的加载,如设置为200,即200像素前加载图片,默认为0,即到达图片边界时才加载。

event:绑定事件,即可以通过绑定click、mouseover或者任意自定义事件来触发图片的加载。默认是当用户滚动到图片窗口时触发图片加载。

effect:设置效果,即可以设置图片加载时的特效,如fadeIn,默认是show。

您还可以设置一个容器里的图片横向或纵向滚动加载效果,不过这个用的少,详情请查看lazyload官网:http://www.appelsiini.net/projects/lazyload

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/151.html

7条评论

  • 用jquer 1.7的版本

  • 经测试去掉lazyload可以解决,所以是lazyload与masonry同时应用的问题,可否亲测解决?

  • 在实际应用看,程序动态调用图片地址,但并不能取到图片宽高 导致砌墙会重叠,要如何解决

  • 怎么我写好之后没看到效果呢?

  • 非常感谢!太帅了!

  • $('#container').masonry({ // options itemSelector : '.photo', columnWidth : 247 }); 这个是实现图片排列的砌墙效果。

  • $('#container').masonry({ // options itemSelector : '.photo', columnWidth : 247 }); 想知道demo示例中这段起什么作用!谢谢