有时候网页比较大且图片有比较多,会导致页面打开的速度很慢,而且还浪费了空间不少的流量(至少我是心疼的)。
Lazy load 是一款延迟加载图片的 jQuery 插件,在一些图片非常多的网站中非常有用,在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才加载,这样对于含有很多图片的比较长的网页来说,可以加载的更快,并且还能节省服务器带宽。
使用方法:
1、首先在页面的head里面加入以下代码:
1
2
|
<script src=
"jquery.js"
type=
"text/javascript"
></script>
<script src=
"jquery.lazyload.js"
type=
"text/javascript"
></script>
|
2、HTML代码如下:
1
2
|
<img
class
=
"lazy"
src=
"img/grey.gif"
data-original=
"img/example1.jpg"
width=
"600"
heigh=
"450"
>
<img
class
=
"lazy"
src=
"img/grey.gif"
data-original=
"img/example2.jpg"
width=
"600"
heigh=
"450"
>
|
其中,src为占位符图片,data-original为图片的真实路径。可以为所有需要延迟加载的img添加一个class,做统一标识。
3、Javascript代码(所有class为lazy的img标签):
1
|
$(
"img.lazy"
).lazyload();
|
Lazy load有如下属性:
threshold:值为number,图片离屏幕多少像素时开始提前加载;
event:值为String,使图片显示的事件,支持jQuery的所有事件,也可以是自定义事件。如:设置event为click,则需要点击占位符图片才能让图片显示;
effect:值为String,图片显示的效果,默认值为show。支持jQuery的fadeIn, slideDown;
container:值为String,使某容器内的使用延迟加载,容器内需要有滚动条;
属性的使用方法:
1
2
3
4
|
$(
"img.lazy"
).lazyload({
threshhold:
100
,
effect:
"fadeIn"
});
|