jquery插件实现图片延迟加载

前几天上QQ的在线视频网站,看到上面的影片列表页的图片有这样一种效果:当向下拉动滚动条时下面的图片才开始加载,就是说它不会一下子把所有的图片都加载出来,拉动滚动条后用户看到了才会显示,这是一个很不错的用户体验。减少了页面加载的时间了,也减轻了服务器的压力,看了一下javascript源码,里面写的了lazyload,我就百度了一下,找到了一个jquery的实现这种效果的插件:jquery.lazyload,一个很不错的插件。

比如你打开一个比较大或者长的网页,那么Lazy load能够实现先加载您所看到区域的图片,等你滚动到哪里,就加载那里的图片。

如果你是图片网站,而且一个页面要加载很多图片,这个插件是个很不错的选择。

如何使用,引用如下js:

[code lang="html"]
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
[/code]

在你的页面中加入如下的javascript:

[code lang="js"]
$("img").lazyload();
[/code]

这将会使所有的图片都延迟加载。插件还有几个配置项可供设置。

当然对于一些用户来说就上面的功能远远是不能达到要求的,下面我们看看是如何设置灵敏度的。我们可以设置阀值来控制 这个功能比较人性化吧。

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

把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件

[code lang="js"]
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
[/code]

我们还可以通过定义effect 参数来定义一些图片显示效果

[code lang="js"]
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});
[/code]

下载地址: source, minified or packed

标签: JQUERY, 图片延迟加载, lazyload

已有 7 条评论

  1. jasonouyang

    哇!超赞的内容! 我也之前看到过此类的效果,但是一直不知道是JQuery的哪个插件,看完此文··马不停的 试去!!! THX!

  2. jasonouyang

    用了这个效果·· 但是,只有IE 有此效果,其他浏览器却没有~~~ SOS ~~~

    1. junstyle

      firefox里面也有效果的,我测试过,你再仔细看看!

  3. liizii

    用firebug一看,实际上图片是页面一打开就加载下来的,只是出现在屏幕上的时候才显示出来。

    不是真正的延迟加载

    1. junstyle

      确实是这样的,如果页面载入的很快(网速比较快的时候),因为那个脚本是页面加载完之后才运行的,所以可能有的图片已经加载了,这个貌似没有解决办法,其实可以把图片的src去掉,如把它改为_src="http://www.xx.com/img.jpg",然后在脚本中设置图片的src为_src的值,这样图片就不会自己加载了。

  4. ziye

    这个在FF中用firebug查看到清除所有缓存后,第一次查看页面,所有文件图片都加载完,并没有提示加载,第二次刷新的时候才会出现加载的数据。。。

  5. ziye

    在IE中清除所有缓存,刷新测试的页面,Temporary Internet Files 里面加载了所有的图片,所有这个方法貌似不能真正实现LazyLoad,只是个假象啊

添加新评论