教学之友,学习之友。

站长教学网

当前位置: 站长教学网 > 前端开发 > JS教程 >

jQuery插件ImageLazyLoad使图片延时加载

时间:2012-09-06 22:20来源:未知 作者:ken 点击:

在网站存在大量图片需要加载页面,这时候就需要根据实际浏览延迟加载图片了,达到节省流量,加快页面打开的体验。

什么是ImageLazyLoad技术

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

Image lazy loader plugin for jQuery.

1.导入JS插件

 
01.<script src="jquery.js" type="text/javascript"></script>
02.<script src="jquery.lazyload.js" type="text/javascript"></script>
2.在你的页面中加入如下的javascript:


方法:1

 
01.$("img").lazyload();
这将会使所有的图片都延迟加载。

方法:2

 
01.$(“img”).lazyload({ threshold : 200 });
把阀值设置成200 意思就是当图片没有看到之前先load 200像素。

方法:3

 
01.$("img").lazyload({
02.placeholder : "img/grey.gif",
03.event : "click"
04.});
通过设置占位符图片和自定事件来触发加载图片事件

方法:4 站长教学网 eduyo.com

 
01.$("img").lazyload({
02.placeholder : "img/grey.gif",
03.effect : "fadeIn"
04.});
通过定义effect 参数来定义一些图片显示效果
 

(责任编辑:ken)
TAG标签: jQuery 图片 插件 ImageLazyLoa
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
注册登录:不允许匿名留言,登录后留言无需输入验证码。
栏目列表
最新内容