jquery.lazyload实现图片耽误加载

假如寄望淘宝的话,应该可以留意到:当打开产物页面后，并不是把页面中图片都下载下来,而是跟着转动条的转动而加载图片.这样可以使页面载入速率更快,节减网站流量,镌汰处事器的负载.你可以机动的把这一技能运用在存在大量图片的页面,好比频道页、勾当页、搜刮功效页等……( 我的博客列表页图片的展示也回收沟通的技能)

大概你照旧一头雾水,别着急接着往下看:

什么是ImageLazyLoad技能

在页面上图片较量多的时辰，打开一张页面肯定引起与处事器大数据量的交互。尤其是对付高清楚的图片，占的几M的空间。ImageLazyLoad技能就是，当前可见界面的图片是加载进来的，而不行见页面（通过转动条下拉可见）中的图片是不加载的，这样势必会引起速率墒导誓晋升。

怎么实现ImageLazyLoad

一、行使JQuery插件 ，插件名: jquery.lazyload（7kb巨细），压缩后（3kb巨细）

在线压缩js http://tool.liehuo.net/tool/reducejs.asp

在页脚添加以下代码即可：

各人可以直接回收淘宝的耽误加载技能：
http://www.veryhuo.com/uploads/allimg/1002/imglazyload-min.js

挪用要领也是很简朴的：
<script src=”http://www.veryhuo.com/uploads/allimg/1002/imglazyload-min.js“
type="text/javascript"></script> <script type="text/javascript">// <![CDATA[KISSY.ImageLazyload();// ]]></script>

注：该剧本依靠 yahoo-dom-event, 页面中必要加载 yui 2.x,你也可以直接引用下面的地点:
<script src="http://www.veryhuo.com/uploads/allimg/1002/yahoo-dom-event.js" type="text/javascript"></script>

至于高级设置，各人可以看这里;

设置参数如下：
<script type="text/javascript">
KISSY.ImageLazyload({
mod: "manual", // 耽误模式。默以为 auto
diff: 200 // 当前屏幕下多远处的图片开始耽误加载。默认两屏外的图片才耽误加载
});
</script>

manual 模式时，必要手动将页面中必要耽误加载的图片的 src 属性名变动为 data-lazyload-src. 好比 SRP 页面，宝物列表的后20个图片耽误加载。输出时，html 代码为：

<img data-lazy-src="path/to/img" alt="something" />

假如您是Jquery，Prototype等这些JS框架的粉丝，他们都有定制的LazyLoad Plugin提供；

可查察http://www.appelsiini.net/projects/lazyload

LazyLoad(耽误加载)技能不只仅用在对网页中图片的耽误加载，对数据同样可以，Google Reader和Bing图片搜刮就把
LazyLoad技能运用的极尽描述；

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!