jQuery 实现图片延时加载提升网站速度

原理：通过 jQuery 插件 lazyload 使得在浏览器可见区域外的图片不会被加载，当图片被用户滚动到浏览器可见区域时图片才进行加载，有点类似使用 Google 搜索图片时的效果。很明显，通过使用图片延时加载可以提高页面的加载速度。

使用 lazyload 插件非常简单，这也是插件的目的所在。首先引入 jQuery 文件和插件文件，这个不再多说，可以在演示页里找到文件的引用方法。

接下来，看看调用插件的方法，如下：

<script type="text/javascript">      
$(document).ready(function() {          
$("img").lazyload({              
effect: "fadeIn"          
});      
});  
</script>

到这里其实就已经实现了我们想要的效果，图片将会以 fadeIn 形式被载入。当然，插件提供了其他的选项，以下是网络上找的一点资料，如果你想继续深入了解的话，请继续往下看：

1.可以设置阀值来控制 灵敏度，下边代码把阀值设置成200 表明当图片没有看到之前先load 200像素。

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

2.可以通过设置占位符图片和自定事件来触发加载图片事件

$("img").lazyload({      
placeholder: "img/grey.gif",      
event: "click"  
});    

3.事件触发加载，事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:

$("img").lazyload({      
placeholder: "img/grey.gif",      
event: "click"  
});    

延迟加载图片，Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.

$(function() {      
$("img:below-the-fold").lazyload({          
placeholder: "img/grey.gif",          
event: "sporty"      
});  
});  
$(window).bind("load", function() {      
var timeout = setTimeout(function() { 
$("img").trigger("sporty") }, 5000);  
});