图片延迟加载lazyload

jQuery图片延迟加载 jQuery.lazyload
使用延迟加载在可提高网页速度
帮助减轻服务器负载
lazyload引入
<!--[if gte IE 9]><!-->
<script src="//cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lt IE 9]>
<script src="//cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="//cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="//www.facesoho.com/public/jquery/jquery_lazyload/jquery.lazyload.js?v=1.9.1"></script>

lazyload使用
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
html图片调用方法
为图片加入样式lazy  图片路径引用方法用data-original
<img class="lazy" data-original="img/bmw_m1_hood.jpg">
<img class="lazy" data-original="img/bmw_m1_side.jpg">
js出始化lazyload并设置图片显示方式    
<script type="text/javascript" charset="utf-8">
  $(function(){ $("img.lazy").lazyload({effect: "fadeIn"}); });
</script>
$(function() {
    $("img.lazy").lazyload();
});

换个效果
$("img.lazy").lazyload({
    effect : "fadeIn"
});

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

 必须设置图片的width和height属性或者在css中设置高度和宽度 否则插件将不能正常工作
 默认图片可见的时候才加载，可以通过设置threshold参数,在图片可见之前的threshold像素时加载图片

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

//appelsiini.net/projects/lazyload/v1/fadein/