圖片預加載

請多多指教！

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

css：

html,body{
    width: 100%;
    height: 100%;
    /*background-color: #4D85F1;*/
}
#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：

<div id="box">
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/img1.jpeg" height="2092" width="2083"/>
</div>
<a onclick="javascript:history.back()">上一页</a>
<a onclick="javascript:history.forward()">下一页</a>
<div id="loading">
    <p id="progress">0%</p>
</div>

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(index<len){
        index++;
        $("img").attr("src",srcs[index]);

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


})
$("a").eq(0).click(function () {
    if(index>0){
        index--;
        $("img").attr("src",srcs[index]);

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


})