jQuery图片延迟加载插件

jQuery图片延迟加载插件
 点击预览  点击下载

Lazy load 是一款延迟加载图片的 jQuery 插件,在一些图片非常多的网站中非常有用,在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才加载,这样对于含有很多图片的比较长的网页来说,可以加载的更快,并且还能节省服务器带宽。

使用方法:

1、首先在页面的head里面加入以下代码:

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

2、HTML代码如下:

  1. <img class="lazy" src="img/grey.gif" data-original="img/example1.jpg"  width="600" heigh="450"> 
  2. <img class="lazy" src="img/grey.gif" data-original="img/example2.jpg"  width="600" heigh="450"> 

其中,src为占位符图片,data-original为图片的真实路径。可以为所有需要延迟加载的img添加一个class,做统一标识。

3、Javascript代码(所有class为lazy的img标签):

  1. $("img.lazy").lazyload(); 

Lazy load有如下属性:

threshold:值为number,图片离屏幕多少像素时开始提前加载;

event:值为String,使图片显示的事件,支持jQuery的所有事件,也可以是自定义事件。如:设置event为click,则需要点击占位符图片才能让图片显示;

effect:值为String,图片显示的效果,默认值为show。支持jQuery的fadeIn, slideDown;

container:值为String,使某容器内的使用延迟加载,容器内需要有滚动条;

属性的使用方法:

  1. <script type="text/javascript" charset="utf-8"
  2. $("img.lazy").lazyload({ 
  3.     threshhold:100, 
  4.     effect:"fadeIn" 
  5. }); 
  6. </script> 

这段请放入页面最后,否则可能会无效。

转载请注明:代码家园 » jQuery图片延迟加载插件

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)