jquery 插件实现图片延迟加载效果代码
作者:bea
减少了页面加载的时间了,也减轻了服务器的压力,看了一下javascript源码,里面写的了lazyload,我就百度了一下,找到了一个jquery的实现这种效果的插件:jquery.lazyload,一个很不错的插件。 比如你打开一个比较大或者长的网页,那么Lazy load能够实现先加载您所看到区域的图片,等你滚动到哪里,就加载那里的图片。 如果你是图片网站,而且一个页面要加载很多图片,这个插件是个很不错的选择。 如何使用,引用如下js: 查看源代码打印帮助 代码如下:
减少了页面加载的时间了,也减轻了服务器的压力,看了一下javascript源码,里面写的了lazyload,我就百度了一下,找到了一个jquery的实现这种效果的插件:jquery.lazyload,一个很不错的插件。
比如你打开一个比较大或者长的网页,那么Lazy load能够实现先加载您所看到区域的图片,等你滚动到哪里,就加载那里的图片。
如果你是图片网站,而且一个页面要加载很多图片,这个插件是个很不错的选择。
如何使用,引用如下js:
查看源代码打印帮助
代码如下:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
在你的页面中加入如下的javascript:
查看源代码打印帮助1 $("img").lazyload();
这将会使所有的图片都延迟加载。插件还有几个配置项可供设置。
当然对于一些用户来说就上面的功能远远是不能达到要求的,下面我们看看是如何设置灵敏度的。我们可以设置阀值来控制 这个功能比较人性化吧。
$(“img”).lazyload({ threshold : 200 });
把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件
查看源代码打印帮助
代码如下:
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
我们还可以通过定义effect 参数来定义一些图片显示效果
查看源代码打印帮助
代码如下:
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});
下载地址:
source,
minified or
packed
有用 | 无用
比如你打开一个比较大或者长的网页,那么Lazy load能够实现先加载您所看到区域的图片,等你滚动到哪里,就加载那里的图片。
如果你是图片网站,而且一个页面要加载很多图片,这个插件是个很不错的选择。
如何使用,引用如下js:
查看源代码打印帮助
代码如下:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
在你的页面中加入如下的javascript:
查看源代码打印帮助1 $("img").lazyload();
这将会使所有的图片都延迟加载。插件还有几个配置项可供设置。
当然对于一些用户来说就上面的功能远远是不能达到要求的,下面我们看看是如何设置灵敏度的。我们可以设置阀值来控制 这个功能比较人性化吧。
$(“img”).lazyload({ threshold : 200 });
把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件
查看源代码打印帮助
代码如下:
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
我们还可以通过定义effect 参数来定义一些图片显示效果
查看源代码打印帮助
代码如下:
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});
下载地址:
source,
minified or
packed
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- jQuery学习7 操作JavaScript对象和集合的函数
- jQuery 学习6 操纵元素显示效果的函数
- jQuery学习5 jQuery事件模型
- jQuery学习4 浏览器的事件模型
- jQuery学习3:操作元素属性和特性
- jQuery学习2 选择器的使用说明
- jQuery ctrl+Enter shift+Enter实现代码
- JQuery 获取和设置Select选项的代码
- 经典海量jQuery插件 大家可以收藏一下
- jQuery AnythingSlider滑动效果插件
- javascript 函数速查表
- js 键盘记录实现(兼容FireFox和IE)
- javascript 同时在IE和FireFox获取KeyCode的代码
- JQuery Dialog(JS 模态窗口,可拖拽的DIV)
- jquery 图片Silhouette Fadeins渐显效果
- 选择TreeView控件的树状数据节点的JS方法(jquery)
- jquery 应用代码 方便的排序功能
- jquery1.4后 jqDrag 拖动 不可用
- javascript小数计算出现近似值的解决办法