延迟加载图片的 jQuery 插件:Lazy Load

标签: 开源 JavaScript jQuery 图像 | 发表时间:2012-08-30 21:25 | 作者:Denis
出处:http://fairyfish.net

网站的速度非常重要,现在有很多网站优化的工具,如 Google 的 Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it 这个工具对图片进行批量压缩,但是对于图片非常多的网站,载入网页还是需要比较长的时间,这个时候我们可以使用 Lazy Load 这个 jQuery 插件来延迟加载图片。

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

Lazy Loader 使用也非常简单,首先确保你的页面已经加载 jQuery Javascript 库,然后在加载 Lazy Load 的 Javascript 文件:

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

然后在页面的 header 添加如下代码即可:

  
<script type="text/javascript"></script>
$(document).ready(function(){
    $("img").lazyload({ 
        placeholder : "/images/grey.gif",
        effect : "fadeIn"
    });
}
</script>

当然 Lazy Load 也有更多复杂的设置,你可以参考 Lazy Load 原文介绍或者 mg12 的翻译

我爱水煮鱼已经增加了这个功能,你可以在一些 图片较多的日志页面预览下。

>>> 继续阅读全文 ...


欢迎关注我们关于 WordPress 技巧的微博:
新浪微博: http://weibo.com/wpjam
腾讯微博: http://t.qq.com/WordPressJam

© 我爱水煮鱼 / 收藏本文 / 23条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

相关 [延迟加载 图片 jquery] 推荐:

延迟加载图片的 jQuery 插件:Lazy Load

- - 我爱水煮鱼
网站的速度非常重要,现在有很多网站优化的工具,如 Google 的 Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it 这个工具对图片进行批量压缩,但是对于图片非常多的网站,载入网页还是需要比较长的时间,这个时候我们可以使用 Lazy Load 这个 jQuery 插件来延迟加载图片.

拒绝图片延迟加载,爽爽的看美图

- 书皮 - 博客园-首页原创精华区
    有一天我一个朋友访问一个XX图片网站……每个人背后总有几个背黑锅的“朋友”,好吧,我承认那个“朋友”其实是我自己,你能把我怎么的.     这个网站用的是Discuz X2搭建的,启动了Discuz的图片延迟加载的功能. 现在很多图片网站为了降低服务器压力都启用了图片延迟加载的机制,也就是只有图片处于可视区域才加载,这样用户没看到的图片就不加载,对于服务器的负载减轻还是帮助很大的.

图片延迟加载 - 前端开发技能必备系列

- - 博客园_首页
在网上经常会看到一些很长的网页会延迟加载其中的图片,我认为这是一种按需分配的做法,网页只为那些想继续浏览网页的人加载后面的图片,在不影响用户体验的前提下,最大程度地减少服务器负担和流量. 目前,主要的购物网站都采用了这种加载方式. 今天在一个网友的站里发现一个图片延迟加载的插件,很好用,在这里介绍一下.

hibernate的延迟加载

- - ITeye博客
    代码的逻辑是:查询出id为1的major, 并输出其名字. 很明显, 代码的逻辑是对的.   可一运行就会报错:. 翻译过来就是:  延迟加载异常:不能初始化代理 --- session不存在. 出现这个报错信息的原因就在于hibernate的延迟加载机制.     所谓的延迟加载就是程序在使用load, iterator方法执行查询及关联查询时, 并不会马上发送并执行sql语句, 而是在调用(被查询)对象属性的getter方法时才去执行查询.

Hibernate延迟加载机制

- - 企业架构 - ITeye博客
转自:http://blog.163.com/xi_zh_qi/blog/static/8501594200812695053939/.    延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作. 在Hibernate中提供了对实体对象的延迟加载以及对集合的延迟加载,另外在Hibernate3中还提供了对属性的延迟加载.

Mybatis查询延迟加载

- - Elim的个人空间
Mybatis 查询延迟加载. 1.1        启用延迟加载. 1.2        分析.        Mybatis的延迟加载是针对嵌套查询而言的,是指在进行查询的时候先只查询最外层的SQL,对于内层SQL将在需要使用的时候才查询出来. Mybatis的延迟加载默认是关闭的,即默认是一次就将所有的嵌套SQL一并查了将对象所有的信息都查询出来.

背景图延迟加载(lazyload)技术

- - Web骇客
图片延迟加载技术目前已经被各种网站广泛的使用,但最近的一篇《 PS美女试验的惊人结果 》文章中使用的却是背景图延迟加载技术. 为什么要使用背景图延迟加载技术. 之所以使用图片延迟加载技术,是为了避免浪费带宽. 有些页面上嵌入了很多图片(上面所说的《 PS美女试验的惊人结果 》里就嵌入了30多张高清美女图),但电脑的屏幕一次只能显示一张或顶多2张.

jQuery图片剪裁插件 Jcrop

- - 博客园_首页
Jcrop是一个jQuery插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能. 对所有图片均unobtrusively(无侵入的,保持DOM简洁). 支持 minSize / maxSize设置. 支持改变选区或移 动选区时的回调(Callback). 通过API创建互 动,比如动画效果.

一款非常轻量的延迟加载插件

- - CSS库
jQuery Unveil 是一款轻量的延迟加载插件,支持提供用于视网膜显示设备的高分辨率图像. 这个插件非常有用,它能提高长网页中图像的加载性能,因为视口以外的图像(可见部分网页)将不会被加载,直到用户滚动到它们所在的区域.   延迟加载有一些很酷的选项,如自定义效果,容器,事件或数据属性. 如果你不想使用这些功能,你可以减小文件的大小,只留下必要的代码来显示图像.

精于图片处理的10款jQuery插件

- DayuLu - UED TEAM,用户体验设计,web前端开发
这篇文章将重点介绍用于图片处理的10个超级jQuery插件,可以生成图片的动画和特效,缩放图片大小等等. 这个插件非常有趣,可以用来缩放图片,旋转对象(3D特效). 可以用来变换图片:旋转,变换倾斜角度,调整图片大小(通常情况下可以和DIV共用). 这个插件可以用来对比两张图片的前后变化. 这个插件可以把你的文字情绪转化成笑脸表情(纯粹的CSS,没有图片).