jQuery懒加载插件-lazyload(还有 jquery.scrollLoading 插件也可以实现图片滚动加载)

优点：1：图片没加载出来时，显示提前设定好的图片，等图片加载好后在显示需要显示的图片

       2：当页面滑动到一定的位置时才加载所需要的图片，否则不加载

代码：

src：图片没有加载完成时提前显示的图片： data-original:图片加载完后所需要显示的图片，最终会显示data-original中的图片

src可不写，默认是一张灰色图片

<img class="lazy" src="img/viper_1.jpg" data-original="img/bmw_m1_hood.jpg" width="765" height="574">

<img class="lazy" src="img/viper_1.jpg" data-original="img/bmw_m1_side.jpg" width="765" height="574">

<img class="lazy" src="img/viper_1.jpg" data-original="img/viper_1.jpg" width="765" height="574">

<img class="lazy" src="img/viper_1.jpg" data-original="img/viper_corner.jpg" width="765" height="574">

<img class="lazy" data-original="img/bmw_m3_gt.jpg" width="765" height="574" >

<img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574">

2：引入jquery库和lazyload库(延迟加载)

<script src="jquery-1.11.0.min.js"></script>

<script src="jquery.lazyload.js?v=1.9.1"></script>

3、js代码

<script type="text/javascript" charset="utf-8">

  $(function() {

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

        // 可以代替img里面src属性中的值

        // placehoder:"img/viper_1.jpg"

        //

        // 图片载入时的效果

        effect: "fadeIn",

        // 参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.

        threshold: 200

//         当事件触发时才加载

//      event:"click"

// 参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…

    });

  });

// 注释：还有 jquery.scrollLoading 插件也可以实现图片滚动加载

</script>