javascript - 如何使我的 javascript slider 响应更快(更快)？

Question

这是我的第一个 Javascript 项目。它是一个带有下一个和上一个箭头的图像 slider 。真正困扰我的一件事是，单击箭头和图像实际更改之间可能存在一些非常明显的滞后。

如果有人审查我的代码并让我知道我可以做得更好，我将非常感激。

http://jsfiddle.net/afptfbs8/40/

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

Answer 1

问题是每次更改图片时，都会从服务器重新获取它。看一下网络面板就知道了。我建议预加载所有图像，这样就不需要每次都重新获取。

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