jquery.lazyload 实现图片延迟加载jquery插件
什么是ImageLazyLoad技术 复制代码 代码如下: $("img").lazyload({ placeholder : "img/grey.gif", event : "click" }); 3.可以通过定义effect 参数来定义一些图片显示效果 复制代码 代码如下: $("img").lazyload({ placeholder : "img/grey.gif", effect : "fadeIn" }); LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把 LazyLoad技术运用的淋漓尽致; 缺陷: 1.与Ajax技术的冲突; 2.图片的延迟加载,遇到高度特别高的图片,会出现停止加载的问题; 3.写代码不规范的同学要注意了,不管由于什么原因,如果您的页面中,img标签的height属性未定义,那么我建议您最好不要使用ImageLazyLoad 大家可以直接采用淘宝的延迟加载技术:(2kb大小) http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js 调用方法也是很简单的: <script src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[KISSY.ImageLazyload();// ]]></script> 注:该脚本依赖 yahoo-dom-event,页面中需要加载 yui 2.x,你也可以直接引用下面的地址: <script src="http://kissy.googlecode.com/svn/trunk/third-party/yui2/yahoo-dom-event/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图片搜索就把 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |