使用jquery.lazyload实现图片懒加载

在长页面中经常会用到图片懒加载，图片懒加载能够在用户浏览的同时加载图片。不影响页面渲染速度，节省带宽。

①引入js文件

②HTML(此处的src为占位图)

③配置参数

$(document).ready(function() {     
            $("img.lazy-load").lazyload({ 
　　　　　　　　　　effect : "fadeIn", //渐现，show(直接显示),fadeIn(淡入),slideDown(下拉)
　　　　　　　　　　threshold : 180, //预加载，在图片距离屏幕180px时提前载入
　　　　　　　　　　event: 'click',  // 事件触发时才加载，click(点击),mouseover(鼠标划过),sporty(运动的),默认为scroll（滑动）
　　　　　　　　　　container: $("#container"), // 指定对某容器中的图片实现效果
　　　　　　　　　　failure_limit：2 //加载2张可见区域外的图片,lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况
　　　　　　　　}); 
　　　　　　});

---

使用懒加载后遇到一个问题，就是客户需要最大程度的保证浏览体验（懒加载在快速滑动时不可避免地会出现加载闪烁——尤其当图片高度不固定时，使用threshold:1000都无济于事）

为了能够在进入标签时快速加载完毕，先不载入图片（其实只是障眼法，与懒加载的“不浏览则不加载”原则完全不同），在window.onload之后再用JS把真实src指向到预设的值。实现在页面加载完毕后的0.1秒开始加载非首屏图片。

修改后的代码：

//JS:
$(document).ready(function () {
    var lazyimg_src = 0;
    function showFirstPic(){
        for (var i =0; i < $("img.lazyimg_later").length; i++){
            lazyimg_src = $("img.lazyimg_later").eq(i).attr("data-original")
            $("img.lazyimg_later").eq(i).attr("src",lazyimg_src)
        }
    }
    var lazy_timer = setTimeout(showFirstPic,100)

});