次のコードは、ユーザーが画像を左右にスクロールできるインターフェイスを開発するという、私がやろうとしていることの要約です。画像は画面から始まり、次に中央に移動します。また、前の画像が画面から押し出されます。
私が持っているコードに関するアドバイスや、より良い方法についての提案をお待ちしています。明らかに、ユーザーが矢印をすばやくクリックすると、間違いなくスクリプトが壊れてしまうので、ここで助けが必要になります。「ロード」状態のときに矢印がクリックされないようにすることはできますか？
また、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);
});