jquery.lazyload 实现图片延迟加载jquery插件

脸红月

脸红月

2016-02-19 13:55

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是jquery.lazyload 实现图片延迟加载jquery插件,一起来学习了解下吧!

什么是ImageLazyLoad技术
在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。

怎么实现ImageLazyLoad

一、使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小)


在线压缩js http://closure-compiler.appspot.com/home
虽然是很牛X的特效,不过用JQuery插件只需要短短几句代码,使用过程如下:

1.导入JS插件
script src="jquery.js" type="text/javascript"/script
script src="jquery.lazyload.js" type="text/javascript"/script
2.在你的页面中加入如下的javascript:

$("img").lazyload();

这将会使所有的图片都延迟加载。


当然插件还有几个配置项可供设置。

1.改变threshold

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

把阀值设置成200 意思就是当图片没有看到之前先load 200像素。


2.当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});


3.可以通过定义effect 参数来定义一些图片显示效果

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
$("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

配置参数如下:

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
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技术运用的淋漓尽致;

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

jquery.lazyload 实现图片延迟加载jquery插件

Web开发
jquery.lazyload  实现图片延迟加载jquery插件

jquery.lazyload.js实现图片延迟加载插件

Web开发
jquery.lazyload.js实现图片延迟加载插件

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jquery 插件实现图片延迟加载效果代码

Web开发
jquery 插件实现图片延迟加载效果代码

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

Web开发
Lazy Load 延迟加载图片的 jQuery 插件

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jquery 简单图片导航插件jquery.imgNav.js

Web开发
jquery 简单图片导航插件jquery.imgNav.js

jQuery chili图片远处放大插件

Web开发
jQuery chili图片远处放大插件

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

穿了2个月的睡衣 该换了 - QQ搞笑分组

穿了2个月的睡衣 该换了 - QQ搞笑分组

在Oracle 10g中如何获得索引建议

在Oracle 10g中如何获得索引建议
下拉加载更多内容 ↓