图片的预加载与懒加载

图片的预加载与懒加载（先加载可视区域的图片 后面的图片在下拉出现在可视区域继续加载或者规定在可视区域的图片加载完之后过了几秒再加载剩余的图片 这个自行规定）
<script src="js/jquery.lazyload.min.js"></script>

添加一个data-original=“”里面的路径写上真正要加载的原图  前面的src可用一个小图或其他的图片代替 

<div class="item active">
    <img src="images/banner1_small.jpg"  data-original="images/banner1.jpg" alt="..." >
    <div class="carousel-caption">
        <h3>六扇门众测群力，共创安全新顶峰</h3>
    </div>
</div>

调用插件

 $(function() {
        //使用了data-original就不要写src了，要不然没有效果
        //在没有完全获取到图片的资源前，是得不到图片的宽高的，所以预先设置宽高，让它提前有个占位
        $('img').lazyload({
            threshold: 200,//滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
            effect: 'fadeIn',//show fadeIn slideDown
            event : "sporty" 让剩余的图片经过多少时间加载
        })
    });

    $(window).bind("load", function() {
        var timeout = setTimeout(function() { $("img").trigger("sporty") },5000); 可见区域的下方图片不加载，经过5秒后，加载剩余的图片

    });
</script>