圖片預加載

請多多指教！

之前我談過頁面優化的懶加載現在說說預加載：
預加載：就是在操作之前就已經把圖片加載好了，提高了用戶的體驗。

css：

html,body{
    width: 100%;
    height: 100%;
    
}
#box{
    width: 200px;
    height: 200px;
    border: 2px solid grey;
    padding: 2px ;
}
img{
    width: 100%;
    height: 100%;
}
a:hover{
    background-color: #4D85F1;
}
#loading{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #F6A1A1;
    top:0;
    left: 0;
    text-align: center;
}
#progress{
    margin: 300px;
    font-size: 30px;
}

HTML：

    

上一页
下一页

    0%

js:

var srcs=["../img/img1.jpeg","../img/img2.jpeg","../img/img3.jpeg"];//為需要加載的圖片
var i=0;
var index=0;
var len=srcs.length;
var count=0;
$.each(srcs,function(i,src){
    var imgObj = new Image();
    $(imgObj).on('load error',function(){
        $("#progress").html(Math.round((count+1)/len *100)+'%');
        if(count>=len-1){
            $("#loading").hide();
        }
        count++;
    });
    imgObj.src=src;
})
$("a").eq(1).click(function () {
    if(index0){
        index--;
        $("img").attr("src",srcs[index]);

    }
    else{
        alert("已经达到第一页了");
    }


})