欢迎光临
我们一直在努力

WEB端-数据可视化深色模式和自适应设计

阅读(262)

本文以近期改版上线的百度流量研究院为例。与大家共同探讨WEB端-数据可视化深色模式和自适应设计的应用。

设计亮点:

深色模式的设计,结合多样化的可视化图表,营造沉浸式的数据浏览体验。

采用响应式设计,为不同终端的用户提供更加舒适的界面和更好的用户体验。

(更多…)

10分钟学会CSS预处理语言Less

阅读(1025)

Less的LOGO

Less 做为 CSS 的一种形式的扩展,它并没有阉割 CSS 的功能,而是在现有的 CSS 语法上,添加了很多额外的功能,将 CSS 赋予了动态语言的特性,如变量、继承、运算、函数等。

Less 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js在服务端运行。

(更多…)

js数组与字符串相互转换

阅读(1915)

toString() 数组转字符串

定义:
toString() 方法可把数组转换为字符串,并返回结果。

语法:
arrayObject.toString()

返回值:
arrayObject 的字符串表示。返回值与没有参数的 join() 方法返回的字符串相同。

说明:
当数组用于字符串环境时,JavaScript 会调用这一方法将数组自动转换成字符串。但是在某些情况下,需要显式地调用该方法。

注释:
数组中的元素之间用逗号分隔。

实例:把数组转字符串,以逗号分隔。

<script>
var arr1 = [ '百度', '阿里巴巴', '腾讯', '邦邦的小站' ];
var str1 = arr1.toString();
console.log(str1); //百度,阿里巴巴,腾讯,邦邦的小站
</script>

join() 把数组元素放入一个字符串

定义:
join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

语法:
arrayObject.join(separator)

参数:
separator 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

返回值:
返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成的。

实例:把数组转字符串,以||分隔。

<script>
var arr2 = [ '百度', '阿里巴巴', '腾讯', '邦邦的小站' ];
var str2 = arr2.join('||');
console.log(str2); //百度||阿里巴巴||腾讯||邦邦的小站
</script>

split() 把字符串分割为字符串数组。

定义:
split() 方法用于把一个字符串分割成字符串数组。

语法:
stringObject.split(separator,howmany)

参数:
separator 必需。字符串或正则表达式,从该参数指定的地方分割 stringObject。
howmany 可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。

返回值:
一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。
但是,如果 separator 是包含子表达式的正则表达式,那么返回的数组中包括与这些子表达式匹配的字串(但不包括与整个正则表达式匹配的文本)。

注释:
如果把空字符串 (“”) 用作 separator,那么 stringObject 中的每个字符之间都会被分割。
String.split() 执行的操作与 Array.join 执行的操作是相反的。

实例:以逗号分割字符串,返回数组。

<script>
var str3 = '小米8,小米MIX 2s,小米电源,小米之家';
var arr3 = str3.split(',');
console.log(arr3); //["小米8", "小米MIX 2s", "小米电源", "小米之家"]
</script>

截取location.search,转换为一个对象

阅读(2278)

Location 对象是 Window 对象的一个部分,包含有关当前 URL 的信息,可通过 window.location 属性来访问。

window.location.search 从问号 (?) 开始的 URL(查询部分)。

以下代码,将当前页面的location对象所请求的参数转化为对象形式

function formatSearch(se){  
    if (typeof se !== "undefined") {      
        se = se.substr(1);  //从起始索引号提取字符串中指定数目的字符
        var arr = se.split("&"),  //把字符串分割为字符串数组
            obj = {},   
            newarr = [];
        arr.forEach(function(v, i){ //数组遍历
        	console.log(v);
        	console.log(i);
        	newarr = v.split("=");
        	if(typeof obj[newarr[0]] === "undefined"){  
                obj[newarr[0]] = newarr[1];  
            }        	
        });
        return obj;
    };  
}
console.log( formatSearch(window.location.search) );

CORS跨域资源共享,实现ajax跨域请求(php简单案例)

阅读(3186)

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。目前,所有现代浏览器都支持该功能,IE浏览器需要IE11+。
CORS跨域资源共享,浏览器兼容性

ajax跨域请求的header设置和案例

和传统ajax请求相比,CORS跨域请求的偶尔工作量主要在数据接收方那一端,也就是在服务器端设置。

举个例子,假设我们服务端使用的是PHP语言,且ajax请求页面的名称是cors-ajax.php,那么,我们可以在此PHP页面进行如下header设置:

// 设置允许其他域名访问
header('Access-Control-Allow-Origin:*');  
// 设置允许的响应类型 
header('Access-Control-Allow-Methods:POST, GET');  
// 设置允许的响应头 
header('Access-Control-Allow-Headers:x-requested-with,content-type');

Access-Control-Allow-Origin:* 表示任何域名的请求,我都不会将别人拒之千里之外。通常实际项目中,我们这里会设置信任的域名,例如:
header('Access-Control-Allow-Origin:http://jmsbang.com');

如果是多个域名,可以使用英文逗号进行分隔,和上面Access-Control-Allow-Methods的书写格式一致。只要在PHP页面中进行了上面设置,剩下的工作就和传统的ajax请求基本上没有任何区别。

例如什么也不干,就随机返回一个图片地址:

<?php
// 刚出现的那些header... 

echo 'http://jmsbang.com/demo/img/w236_1'. rand(1,4) .'.png'; 
?>

此时我们随随便便建一个Html页面,写下下面这段极简的XMLHttpRequest请求JS代码:

// 请求方式随机
var method = Math.random() > 0.5 ? 'get' : 'post';
var xhr = new XMLHttpRequest();
xhr.open(method, 'http://jmsbang.com/demo/cors-ajax.php');
xhr.onload = function () {
	result.innerHTML = '<img src="'+ xhr.responseText +'" alt="" />';
};
xhr.send(null);

我们就能请求到cors-ajax.php随机返回的图片地址。眼见为实,您可以狠狠地点击这里:CORS ajax跨域请求测试demo

可以看到,我们的demo测试页面域名是www.ysichuan.com,而请求的php页面域名是jmsbang.com,典型的跨域请求场景,下面看看会发生什么:

点击demo页面上按钮,然后当当当当:

CORS ajax跨域请求测试demo

成功请求到了随机图片地址,并在页面上呈现图片出来。

与JSONP的比较

CORS与JSONP的使用目的相同,但是比JSONP更强大。

JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

CSS3过渡 transition

阅读(2021)

之前我们整理了CSS3中的动画属性 Transform 转换,今天我们接着一起来看看CSS3中的另一个动画属性 Transition 过渡。

W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

CSS3 过渡

下面我们就从语法和属性值,开始来学习transition的具体使用

transition 语法:

transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
或
transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>][, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

[注意] IE9-不支持该属性,safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀;而其余高版本浏览器支持标准写法。

transition是一个复合属性, 适用于所有元素,包含伪对象:after:before。通过下面这四个子属性的配合来完成一个完整的过渡效果。

  • transition-property: 过渡的属性 (默认值为all)
  • transition-duration: 过渡的持续时间 (默认值为0s)
  • transiton-timing-function: 过渡的动画类型 (默认值为ease函数)
  • transition-delay: 过渡的延迟时间 (默认值为0s)

transition-property 过渡属性

语法:

transition-property: none | all | [ property ] [ ,property ]*

transition-property 属性规定应用过渡效果的 CSS 属性的名称。(当指定的 CSS 属性改变时,过渡效果将开始)。
其主要值有:none(没有属性改变),all(所有属性改变)这个也是其默认值,property(元素属性名)。
当其值为none时,transition马上停止执行,当指定为all时,则元素产生任何属性值变化时都将执行transition效果,property是可以指定元素的某一个属性值。如果提供多个属性值,以逗号进行分隔。

实例:transition-property: width ,background;

CSS3 过渡

[注意] 请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。

transition-duration 过渡持续时间

语法:

transition-duration: <time>[ ,<time> ]*

transition-duration是用来指定元素过渡的持续时间,取值:为数值,单位为s(秒)或者ms(毫秒)。其默认值是0s,也就是过渡时是即时的。如果提供多个属性值,以逗号进行分隔。

transition-timing-function 过渡的动画类型

语法:

transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
或
transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

取值:
transition-timing-function 的值允许你根据时间的推进去改变属性值的变换速率,它有6个可能值:

1、ease:平滑过渡(逐渐变慢)默认值,等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear:线性过渡(匀速),等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in:由慢到快(加速),等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out:由快到慢(减速),等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out:由慢到快再到慢(加速然后减速),等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

ease
linear
ease-in
ease-out
ease-in-out

其是cubic-bezier为通过贝赛尔曲线来计算“过渡”过程中的属性值,如下曲线所示,通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.
贝赛尔曲线

其他几个属性的示意图:
transition-timing-function 过渡的动画类型

如果要凭脑子空写出贝赛尔函数的代码,可能比较困难。好在不用你自己去计算,可以到工具网站(如贝赛尔立方)上自动生成想要效果的代码。你也可以在该站点上,体验一把linear,ease,ease-in,ease-out,ease-in-out间的差异。

transition-delay 过渡的延迟时间

语法:

transition-delay: <time>[ ,<time> ]*

transition-delay 用来指定一个过渡动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,其取值:为数值,单位为s(秒)或者ms(毫秒),其使用和transition-duration极其相似。默认大小是”0s”,也就是变换立即执行,没有延迟。

触发过渡的方式

常见的就是伪类触发:hover,:active,:focus,:checked等。还有例如@media媒体查询,根据设备大小,横屏竖屏切换时触发。还有,如click,keydown等JS事件触发,页面加载也能触发就不一一列举了。

1、:hover 鼠标悬停触发,实例:

触发

2、:active 用户单击元素并按住鼠标时触发,实例:

触发

3、:focus 获得焦点时触发,实例:

4、@media触发 符合媒体查询条件时触发,实例:

触发

5、点击事件 用户点击元素时触发,实例:

触发

总之过渡的本质是在时间段内平滑过渡属性值,与怎么触发没有关系。

CSS3实现多行文本溢出显示省略号(…)

阅读(1431)

大家应该都知道用 text-overflow:ellipsis 属性,来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

实现方法:

{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

效果如图(或点击这里查看demo):

单行文本的溢出显示省略号

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

CSS3实现多行文本溢出显示省略号

接下来重点说一说多行文本溢出显示省略号,如下。

实现方法:

{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

效果如图(或点击这里查看demo):
多行文本的溢出显示省略号

适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

注:
-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。

为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis; 可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本

CSS3 新版弹性盒子模型(Flex Box)

阅读(1803)

传统布局方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

2009年,W3C 提出了一种新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

Flex 布局是什么?】

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器内包含了一个或多个弹性子元素。
(更多…)

CSS3 Transform 转换(制作旋转、位移、缩放等效果详解)

阅读(17038)

CSS3 transform 是什么?

transform 字面上是:变换;改变,使…变形;转换的意思。

在CSS3中 transform 的属性包括:旋转 rotate()、位移 translate()、缩放 scale()和扭曲(倾斜) skew()以及矩阵变形 matrix()。下面我们一起来看看CSS3中具体如何实现的吧。

语法:

   transform : none | <transform-function> [ <transform-function> ]* 
   也就是:
   transform: rotate | scale | skew | translate |matrix;

none:表示不进么变换;<transform-function>表示一个或多个变换函数,以空格分开;换句话说就是我们同时对一个元素进行transform的多种属性操作,例如 rotate、scale、translate 三种,但这里需要提醒大家的,以往我们叠加效果都是用逗号(“,”)隔开,但 transform 中使用多个属性时却需要有空格隔开。

下面我们分别来介绍这几个属性值参数的具体使用方法:

rotate()  旋转函数 取值度数
    deg  度数
    transform-origin 旋转的基点
translate() 位移函数
    translateX()
    translateY()
skew() 倾斜函数 取值度数 
    skewX()
    skewY()
scale() 缩放函数 取值 正数、负数和小数
    scaleX()
    scaleY()

一、旋转 rotate

语法:

    transform: rotate(<angle>) ;

通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义。
transform-origin 定义的是旋转的基点,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。
如:transform:rotate(30deg)

旋转 rotate

二、位移 translate

translate我们分为三种情况:

translate(x,y) 水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动),如:transform:translate(100px,20px)

translateX(x) 仅水平方向移动(X轴移动),如:transform:translateX(100px)

translateY(y) 仅垂直方向移动(Y轴移动),如:transform:translateY(20px)

具体效果如下(或点击这里查看demo):

位移 translate

当参数值x,y为负数时,反方向移动物体,它们基点默认为元素中心点,也可以根据transform-origin进行改变基点。

三、缩放 scale

缩放scale和位移translate是极其相似,它也有三种情况:

scale(x,y)使元素水平方向和垂直方向同时缩放(X轴和Y轴),如:transform:scale(2,1.5)

scaleX(x)元素仅水平方向缩放(X轴缩放),如:transform:scaleX(2)

scaleY(y)元素仅垂直方向缩放(Y轴缩放),如:transform:scaleY(2)

具体效果如下(或点击这里查看demo):

缩放 scale

它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。

如果scale(x,y)没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的,并以X为准。

四、扭曲(倾斜) skew

扭曲skewtranslate、scale一样同样具有三种情况:

skew(x,y) 使元素在水平和垂直方向同时扭曲(X轴和Y轴),如:transform:skew(30deg,10deg)

skewX(x) 仅使元素在水平方向扭曲变形(X轴),如:transform:skewX(30deg)

skewY(y) 仅使元素在垂直方向扭曲变形(Y轴),如:transform:skewY(10deg)

具体效果如下(或点击这里查看demo):

扭曲(倾斜) skew

同样它们是以元素中心为基点,我们也可以通过transform-origin来改变元素的基点位置。

五、矩阵 matrix

matrix() 方法是一种简写形式,有六个参数,包含旋转,缩放,移动(平移)和倾斜的功能。

语法:

    matrix(<number>, <number>, <number>, <number>, <number>, <number>) 

它以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。也就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,这里就不多说了。

六、改变元素基点 transform-origin

前面我们多次提到transform-origin这个东东,它的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置,因为元素默认基点就是其中心位置。下面我们主要来看看其使用规则:
语法

    transform-origin: x-axis y-axis;
描述
x-axis

定义视图被置于 X 轴的何处。可能的值:

  • left

  • center

  • right

  • length

  • %

y-axis

定义视图被置于 Y 轴的何处。可能的值:

  • top

  • center

  • bottom

  • length

  • %

其中 left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%;而top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%;如果只取一个值,表示垂直方向值不变,我们分别来看看以下几个实例(或点击这里查看demo):

改变元素基点 transform-origin

浏览器支持

同样的transform在IE9下版本是无法兼容的,下面表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

transform 转换应用实例

1、css3 同时实现旋转和缩放(放大或缩小)

.demo1-1:hover{ transform: rotate(360deg) scale(1.5);}
.demo1-2:hover{ transform: rotate(360deg) scale(.5);}

2、CSS3 实现位移并且带有放大或缩小的效果

.demo2-1:hover{ transform: scale(1.2) translateX(100px); }
.demo2-2:hover{ transform: scale(.8) translateX(100px); }

3、css3 旋转后发生位移

.demo3{ animation: demo3 3s linear 0s infinite; }
@keyframes demo3{
	0%{}
	30%{ transform: rotate(360deg); }
	60%{ transform: translateX(100px); }
	100%{ transform: translateX(100px); }
}

jQuery图片延迟加载(懒加载)插件 – jquery.lazyload.js

阅读(1855)

jquery.lazyload图片延迟加载

LazyLoad是一个用JavaScript编写的jQuery插件,它可以延迟加载长页面中的图片,从而提高网页下载速度和减轻服务器负载。

如何使用

LazyLoad依赖于jQuery,请将以下代码加入HTML的结尾,也就是前:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>

你必须改变图片的标签,图像的地址必须放在data-original属性上。并给懒加载图像一个特定的class(例如:lazy),这样你可以很容易地进行图像插件捆绑。代码如下:

<img class="lazy" alt="" width="400" height="300" data-original="img/example.jpg" />

将使所有class为lazy的图片延迟加载。

$(function() {
    $("img.lazy").lazyload();
});

Demo:基本选项

Tips:这里必须设置图片的widthheight,否则插件可能无法正常工作。

设置临界点

默认情况下只有图片出现在屏幕时才加载,如果你想提前加载图片, 可以设置threshold选项, 设置 threshold : 200 令图片在距离屏幕200像素时提前加载。

$("img.lazy").lazyload({
    threshold : 200
});

设置事件来触发加载

你可以使用jQuery事件,例如clickmouseover。也可以使用自定义事件,如sportyfoobar默认情况下是要等到用户向下滚动并且图像出现在视口中时。只有当用户点击它们才加载图片:

$("img.lazy").lazyload({
    effect : "fadeIn"
});

使用特效

默认情况下,插件等待图像完全加载并调用show()。你可以使用任何你想要的效果。下面的代码使用fadeIn(淡入效果)。
Demo:淡入效果

$("img.lazy").lazyload({
    effect : "fadeIn"
});

加载隐藏的图片

可能在你的页面上埋藏可很多隐藏的图片,比如插件用在对列表的筛选, 你可以不断地修改列表中各条目的显示状态。为了提升性能, Lazy Load 默认忽略了隐藏图片。 如果你想要加载隐藏图片, 请将 skip_invisible 设为 false

$("img.lazy").lazyload({ 
    skip_invisible : false
});

当图像不连续时

滚动页面的时候, LazyLoad 会在循环中检测图片是否在可视区域内。默认情况下在找到第一张不在可见区域的图片时停止循环,图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同。但是在一些布局中, 这样的假设是不成立的。不过你可以通过 failurelimit 选项来控制加载行为.

$("img.lazy").lazyload({
    failure_limit : 10
});

将 failurelimit 设为 10 ,令插件找到 10 个不在可见区域的图片时才停止搜索。

针对不启用JavaScript的情况

几乎所有浏览器的 JavaScript 都是激活的,然而可能你仍希望能在不支持 JavaScript 的客户端展示真实图片。当浏览器不支持 JavaScript 时优雅降级, 你可以将真实的图片片段在写 <noscript> 标签内。

<img class="lazy" data-original="img/example.jpg"  width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

可以通过 CSS 隐藏占位符

.lazy {
    display: none;
}

在支持 JavaScript 的浏览器中, 你必须在 DOM ready 时将占位符显示出来, 这可以在插件初始化的同时完成。

$("img.lazy").show().lazyload();

图片在容器里面

你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.
Demo:容器内水平滚动, 容器内垂直滚动

更多lazyload参数

placeholder : "img/grey.gif",     //用图片提前占位
effect : "fadeIn",    //载入使用何种效果,effect(特效),show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
threshold : 200,    //提前开始加载
    // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
event : "click",      //事件触发时才加载
    // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标划过或点击图片才开始加载,后两个值未测试…
failurelimit : 10,     //图片排序混乱时 ,
    // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
container: $("#container"),  // 对某容器中的图片实现效果
    // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
data_attribute : 'original'  //真实图片地址的 data 属性后缀

下载插件

最新版本 源代码压缩代码. 插件已经在 OSX 的 Safari 5.1, Safari 6, Chrome 20, Firefox 12 浏览器上, Windows 的 Chrome 20, IE 8 and IE 9 浏览器上, 以及 iOS5 (iPhone 和 iPad) 的 Safari 5.1 浏览器上测试过.另外,lazyload需要jquery1.3.0版以上,或者 zepto1.0.0以上。