正确有效地实现后台加载

下面的代码是我正在尝试做的事情的摘要，即开发一个允许用户在图像中左右滚动的界面。图像从屏幕开始，然后到中心，它还将上一个图像推回屏幕。

我希望对我拥有的代码有一些建议，或者关于如何做得更好的建议。显然，如果用户快速单击箭头，它无疑会破坏脚本，所以我在这里需要帮助。也许可以防止在处于"加载"状态时单击箭头？

我还应该提到 backgroundLoad 预加载下一个和上一个图像。当我说"屏幕外"时，它会动画到中心。我不是在寻找图片库/灯箱解决方案。这个问题更多的是关于预加载过程。

var imgArray=[];
    var b = 0;
    function loadImage(ini){
        b = ini;
        //preload image
        var num_loaded = 0;
    imgArray[ini] = new Array();;

    for(var i=0;i<2;i++){
        imgArray[ini][i] = new Image();
        imgArray[ini][i].onload = function(){
            num_loaded++;
            if(num_loaded == 1){
            }
            if(num_loaded == 2){
                //do something


               backgroundLoad(ini+1);

            }
        }
        imgArray[ini][i].src = ArrayOfFiles[ini][i];
    }

}
function backgroundLoad(ini){
    var num_loaded = 0;
    imgArray[ini] = new Array();;
    for(var i=0;i<2;i++){
        imgArray[ini][i] = new Image();
        imgArray[ini][i].onload = function(){
            num_loaded++;

            if(num_loaded == 2){

                // loaded


            }
        }
        imgArray[ini][i].src = ArrayOfFiles[ini][i];
    }

}
$("div#arrow-left").click(function(){
    loadImage(b+1);
});
$("div#arrow-right").click(function(){
    loadImage(b-1);
});