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

　　　　});

转载于:https://www.cnblogs.com/xiaofang-FE/p/6732616.html