以下代码总结了我正在尝试做的事情，即开发一个允许用户左右滚动浏览图像的界面。图像从屏幕开始，然后到中心，它还会将之前的图像推回屏幕。
我希望能就我的代码获得一些建议或如何做得更好的建议。显然，如果用户快速单击箭头，这无疑会破坏脚本，所以我在这里需要帮助。也许在“加载”状态下阻止箭头被点击？
我还应该提到 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);
});
最佳答案
您是否尝试过以下预编写工具之一？ 这些将已经具备您需要的所有(以及更多)功能。
关于javascript - 正确有效地实现后台加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11130382/