提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery插件 实现 图片 加载 延迟 lazyload
2023-06-13 09:14:16 时间

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

怎么实现ImageLazyLoad

一、使用JQuery插件，插件名:jquery.lazyload（7kb大小），压缩后（3kb大小）


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

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

$("img").lazyload();

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


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

1.改变threshold

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

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


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

复制代码代码如下:

$("img").lazyload({
placeholder:"img/grey.gif",
event:"click"
});


3.可以通过定义effect参数来定义一些图片显示效果
复制代码代码如下:

$("img").lazyload({
placeholder:"img/grey.gif",
effect:"fadeIn"
});


LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载，对数据同样可以，GoogleReader和Bing图片搜索就把
LazyLoad技术运用的淋漓尽致；
缺陷：
1.与Ajax技术的冲突；
2.图片的延迟加载，遇到高度特别高的图片，会出现停止加载的问题；
3.写代码不规范的同学要注意了，不管由于什么原因，如果您的页面中，img标签的height属性未定义，那么我建议您最好不要使用ImageLazyLoad

大家可以直接采用淘宝的延迟加载技术:(2kb大小)
http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js
调用方法也是很简单的：
<scriptsrc="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js"
type="text/javascript"></script><scripttype="text/javascript">//<![CDATA[KISSY.ImageLazyload();//]]></script>
注：该脚本依赖yahoo-dom-event,页面中需要加载yui2.x,你也可以直接引用下面的地址:
<scriptsrc="http://kissy.googlecode.com/svn/trunk/third-party/yui2/yahoo-dom-event/yahoo-dom-event.js"type="text/javascript"></script>

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

manual模式时，需要手动将页面中需要延迟加载的图片的src属性名更改为data-lazyload-src.比如SRP页面，宝贝列表的后20个图片延迟加载。输出时，html代码为：

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

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

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

LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载，对数据同样可以，GoogleReader和Bing图片搜索就把
LazyLoad技术运用的淋漓尽致；

相关文章