Question

这是我在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

Answer 1

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

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

如何让我的javascript滑块响应更快（更快）？

1 个答案: