Question

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

我希望对我的代码有一些建议，或者建议如何更好地完成它。显然，如果用户快速点击箭头，它无疑会打破脚本，所以我在这里需要帮助。也许防止箭头在处于“加载”状态时被点击？

我还应该提一下，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);
});

Answer 1

您是否尝试过以下预先编写的工具之一？那些已经拥有你需要的所有（和更多）功能。

正确有效地实施后台加载

1 个答案: