图片懒加载

  

【options 参数说明】

名称	默认值	说明
threshold	0	灵敏度。默认为 0 表示当图片出现在显示区域中的立即加载显示；设为整数表示图片距离 x 像素进入显示区域时进行加载；设为负数表示图片进入显示区域 x 像素时进行加载。
failure_limit	0	容差范围。页面滚动时，Lazy Load 会遍历延迟加载的图片，检查是否在显示区域内，默认找到第 1 张不可见的图片时，就终止遍历。因为 Lazy Load 认为图片的排序是与 HTML 中的代码中的排序相同，但是也可能会出现例外，通过该值来扩大容差范围。
event	"scroll"	触发加载的事件 [Demo]
effect	"show"	加载使用的动画效果，如 show, fadeIn, slideDown 等 jQuery 自带的效果，或者自定义动画。 [Demo]
effectspeed	undefined	动画时间。作为 effect 的参数使用：effect(effectspeed)
container	window	父容器。延迟加载父容器中的图片。 [Demo1] [Demo2]
data_attribute	"original"	真实图片地址的 data 属性后缀
skip_invisible	true	跳过隐藏的图片。图片不可见时（如 display:none），不强制加载。
appear	null	图片加载时的事件 (Function)，有 2 个参数：elements_left（未加载的图片数量）、settings（lazyload 的参数）。[Demo]（参考 DEMO 的源代码）
load	null	图片加载后的事件 (Function)，有 2 个参数，同 appear 。[Demo]（参考 DEMO 的源代码）

原理

在 HTML的img 标签中添加新的属性，把 src 属性的值指向占位图片，添加 data-original 属性，让其指向真正的图像地址。
将所有要加载的图片对象保存在elements集合里，当触发滚动事件（或别的改变屏幕区域的事件），遍历所有未加载图片，当图片在可视区域里时，替换src属性值为data-original属性的值，并将loaded值设为true，并将加载过的图片从未加载的图片集合里删除。
当容器滚动或大小改变时，再重新历遍元素判断。如此重复，直到所有元素都加载后就完成。

使用

当浏览器关闭js时，可以使用<noscript>标签。用<noscript><img src="真实图片地址" />/<noscript>。

　  提前加载

　　默认的情况是，当你滚动到图片位置的时候，插件开始加载。这样，用户可能首先看到的是一个空白图像，然后再缓慢出现。如果你想在用户滚动之前，提前加载这个图像，你可以配置一下参数。

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

　　threshold 这个参数，就是用来提前加载的。上面这个语句的意思是，当距离图片还有200像素的时候，就开始加载图片。

      延迟加载

　　页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.

1	$(function() {    $( "img.lazy" ).lazyload({ placeholder : "img/1.gif",event:"sporty" }); }); $(window).bind("load", function() {     var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);     });

　　自定义触发事件

　　默认的触发事件，是滚动，当你滚动的时候，就会检查然后加载。你可以使用event属性，设置你自己的加载事件，之后你可以自定义触发这个事件的条件，然后去加载图像。

1	$( "img.lazy" ).lazyload({ event : "click" });

　　自定义显示效果

　　默认的图片实现效果，就是没有效果，下载完成之后，直接显示出来。这样的用户体验并不好，你可以设置 effect 属性，来控制显示图片的效果。例如

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

　　fadeIn的效果就是，改变图片的透明度，渐现的方式出现。效果： effect demo page

　　把图像插入某个容器

　　大家如果使用智能手机的话，经常去应用网站下载应用，他们通常使用一个横着的容器，放一些手机截图。使用 container 属性，能很轻松在容器中实现缓冲加载。首先，我们需要用css定义这个容器，然后用这个插件进行加载。效果： vertical

1	#container { height : 600px ; overflow : scroll ; }

1 2 3

$( "img.lazy" ).lazyload({               container: $( "#container" ) });

　　加载不可见图像

　　有部分图像是不可见的，我们对其加上类似 display：none 等属性的图像。默认的情况下，这个插件是不会加载隐藏的不可见图像。如果我们需要用它加载不可见图像，我们需要将 skip_invisible 设置为 false

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