jq图片懒加载

　　在图片比较多的页面中，若是一次性把全部的图片所有加载出来，不只加载速度慢，还会对服务器形成不小的压力，也浪费了带宽（不是每一个用户都会从头到尾看完全部页面内容），那么在图片比较多的状况下，咱们就能够采起图片懒加载的形式来解决这个问题。

jq中有一个lazyload.js的插件，方便好用，下面简单的介绍一下这个插件的用法

　　1.lazyload.js是依赖于jq的，因此在使用lazyload插件的时候，必须先引入jq,而后再引入lazyload的这个js　　

　　　　<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
　　　　<script src="js/lazyload.js"></script>

      2.在使用这个插件的时候，img标签的src必须改变成data-original才能够，给img标签取了一个lazy的名字，方便后面给img标签绑定事件，同时，须要给img标签加宽和高的属性才能使懒加载正常运行，不加的话，懒加载是无效的

　　　　.lazy{width: 100%;height:800px;border:none;}

　　　　<img data-original="imgs/1.jpg" alt="" class="lazy">

　　 3.使img标签懒加载，只需加如下代码

　　　　$(function() {

     　　 $("img.lazy").lazyload();  //叫lazy这个名字的img标签就都被懒加载了

　　　　})

　　 4.能够根据本身的需求来设置怎么触发加载，好比，点击的时候进行加载，也可使用自定义事件。怎么经过事件让图片加载呢，看下面的代码：

　　　　 $( "img.lazy" ).lazyload({

   　　  event :  "click"    //只有在点击的时候才会被加载

　　　　});

　　 5.使用特效，好比，图片淡入效果，代码以下

　　　　 $( "img.lazy" ).lazyload({

   　　  effect : "fadeIn"

　　　　});

　　  6.插件默认是有占位符的，这个占位符咱们也能够给它隐藏掉，只须要如下css代码就能够实现

　　　　 .lazy {

    　　 display: none;

　　　　}

　　  7.加载隐藏的图片，可能在你的页面上埋藏可不少隐藏的图片. 好比插件用在对列表的筛选, 你能够不断地修改列表中各条目的显示状态. 为了提高性能, Lazy Load 默认忽略了隐藏图片. 若是你想要加载隐藏图片, 请将  skip_invisible 设为  false

　　　　 $( "img.lazy" ).lazyload({

    　　 skip_invisible : false

　　　　});