如何讓我的JavaScript滑塊更快速響應（更快）？

這是我第一個使用Javascript的項目。這是一個帶有下一個和上一個箭頭的圖像滑塊。真正困擾我的一件事是點擊箭頭和實際改變的圖像之間可能會有一些非常明顯的滯後。如何讓我的JavaScript滑塊更快速響應（更快）？

我真的很感激，如果有人檢查我的代碼，讓我知道我可以做得更好。

var myImage = document.getElementById("mainImage"); 
var imageArray = ["http://lorempixel.com/400/200/sports/1/", "http://lorempixel.com/400/200/sports/2/", "http://lorempixel.com/400/200/sports/3/", "http://lorempixel.com/400/200/sports/4/"]; 
var imageIndex = 0; 
var prevImage = document.getElementById("prev"); 
var nextImage = document.getElementById("next"); 
var myTime = 3000; 
var myInterval = setInterval(changeImage, myTime);      

function changeImage() { 
    imageIndex++; 
    if (imageIndex >= imageArray.length) { 
     imageIndex = 0; 
    } 
    myImage.setAttribute("src", imageArray[imageIndex]); 
} 

prevImage.onclick = function() { 
    clearInterval(myInterval); 
    myInterval = setInterval(changeImage, myTime); 
    if (imageIndex === 0) { 
     imageIndex = imageArray.length -1; 
    } else { 
     imageIndex = imageIndex - 1; 
    } 
    myImage.setAttribute("src", imageArray[imageIndex]); 

}; 

nextImage.onclick = function() { 
    clearInterval(myInterval); 
    myInterval = setInterval(changeImage, myTime); 
    if (imageIndex === imageArray.length -1) { 
     imageIndex = 0; 
    } else { 
     imageIndex = imageIndex + 1; 
    } 
    myImage.setAttribute("src", imageArray[imageIndex]); 
}; 

imageArray.forEach(function (value, index) { 
    var node = document.createElement("li"); 
    var textNode = document.createTextNode(index); 
    node.appendChild(textNode); 
    document.getElementById("myList").appendChild(node); 
}); 


myInterval

來源

2015-05-06 Matt

我建議你把你的圖像放在你的文件目錄，而不是在線，因爲如果它訪問互聯網需要更多的時間加載。您下載所有圖像並使用src指定圖像的鏈接 – Dale

的問題是，每次更改圖片的時候，你是從服務器重新獲取它。看看網絡面板來看看。我建議預先加載所有的圖像，以免他們每次都需要重新提交。

var images = new Array(); 
for (var i = 0; i < imageArray.length; i++) { 
    images[i] = new Image(); 
    images[i].src = imageArray[i]; 
}

來源

2015-05-06 03:23:27 Tatermelon

如何讓我的JavaScript滑塊更快速響應（更快）？

回答

相關問題