lazy load
来源:互联网 发布:象棋训练软件 编辑:程序博客网 时间:2024/05/31 18:45
lazy load是一款用来延迟图片加载的jQuery插件,如果网页上的图片比较多,使用这个jQuery插件就可以在一定程度上降低服务器的负载,从而达到优化网页的效果。
细心的同志可能注意到了本博首页的文章缩略图的加载效果,当用户往下拖动滚动条的时候,图片才会加载出来。正常的加载方法是在页面载入时同时加载图片的,可以说是“多线程”的加载方式吧,而lazy load的加载方式就是按需加载,效果还是挺不错的。
lazy load的使用也很简单,既然是jQuery插件,那么第一步肯定是在<head>标签中导入jQuery的库文件,然后接着导入lazy load的代码:
1
<script src=
"jquery.js"
type=
"text/javascript"
></script>
2
<script src=
"jquery.lazyload.js"
type=
"text/javascript"
></script>
载入库文件后,就开始写jQuery的代码:
1
$(function()
2
(
'img'
).lazyload();
3
});
这样就可以让页面中所有的图片都延迟加载了,lazy load还有一些比较重要的参数,这里我都简单的介绍下。
图片灵敏度
1
$(function()
2
(
'img'
).lazyload({ threshold : 200 });
3
});
threshold是设置临界值的参数,所谓临界值就是触发位置到图片的距离,临界值的默认值为0。数值越大,你就越不能看到图片延迟加载的效果。如果比较看重用户体验,这个值应该可以好好利用。
占位图片
1
$(function()
2
$(
"img"
).lazyload({ placeholder :
"img/grey.gif"
});
3
});
在图片没完全加载完的时候就显示的是图片的背景,你可以使用占位图片来填充这个背景,placeholder就是设置占位图片的路径。
事件触发
1
$(function()
2
$(
"img"
).lazyload({
3
placeholder :
"img/grey.gif"
,
4
event
:
"click"
//设置触发事件为鼠标点击
5
});
6
});
触发图片延迟加载的事件可以是jQuery的任意事件,比如鼠标点击(click)或鼠标悬停(hover),还可以自定义事件。默认是等待用户拖动滚动条到使窗口到图片的位置的时候才加载。
图片加载的效果
1
$(function()
2
$(
"img"
).lazyload({
3
placeholder :
"img/grey.gif"
,
4
effect :
"fadeIn"
//设置图片的加载效果为淡入
5
});
6
});
图片在加载的时候可以设置以何种方式加载图片,默认的加载方式是jQuery的show()方法,上面的代码是设置加载效果为淡入(fadeIn)。
一般情况下,经常用到的参数就是这些了,如果你想了解更多参数设置,可以查看英文的lazy load官方说明。
lazy load的mini版下载地址。
- lazy load
- lazy load
- Lazy Load
- 关于Lazy Load
- Hibernate lazy load.
- fragment lazy load problem
- swift - lazy load
- Hibernate lazy load
- javascript lazy load
- Lazy Load Images jQuery Plugin
- spring mvc lazy load problem
- lazy load plugin for jQuery
- Lazy Load 图片懒加载
- 延时加载(lazy load)
- vue lazy-load 懒加载
- jQuery插件-Lazy Load延迟加载图片
- 使用lazy load延迟图片的加载
- jQuery图片延迟加载插件Lazy Load
- PV操作简单理解
- 子数组的和的最大值
- Javascript--showModalDialog()
- nginx ssl 另外一粒
- php://input
- lazy load
- 细谈Hibernate(十五)HQL与QBC查询方式详解
- 黑马程序员 Java网络编程
- telnet ssh
- poj1330 解题报告
- 全国人大常委会23日起将审议个别代表资格-全国人大-吴邦国-代表资格
- ALSA SOC在Linux3.1上的一些改进
- Linux Quota基础配置(可以调整文件目录大小)
- 简单排序算法总结