图片延迟加载效果-lazyload插件

最近发现lazyload插件在网上特火,好多大网站都用到了这技术,就是网页加载当前可视的范围内的图片,不可视的页面的图片暂时是不会被加载的,随着鼠标的滑动往下的图片也一点点被加载。它减轻了服务器的加载负担,提高了网页加载速度。

1、要想实现着效果,首先得载入jquery.js和lazyload.js插件,在页面js里得加上“$("img").lazyload();这表示此页面上所有的图片都被延迟加载。

2、可以通过设置临界值 (触发加载处到图片的距离) 来控制图片的加载. 默认值为 0 (到达图片边界的时候加载).即如果将临界值定为 200, 当可视区域离图片还有 200 个象素的时候开始加载图片.

3、可以设定一个占位图片并定义事件来触发加载动作. 这时需要为占位图片设定一个 URL 地址. 透明, 灰色和白色的 1×1 象素的图片已经包含在插件里面.

$("img").lazyload({ placeholder : "img/grey.gif" });

3、图片完全加载的时候, 插件默认地使用show()方法来将图显示出来. 其实你可以使用任何你想用的特效来处理. 下面的代码使用 FadeIn 效果.

$("img").lazyload({

       threshold : 200,    
   placeholder : "img/grey.gif",
   effect : "fadeIn"
});

 

 

posted @ 2010-03-23 14:55  lch880  阅读(445)  评论(0编辑  收藏  举报