javascript - 即使图像是随机显示的，索引也能正常工作

Question

我的 html 中有这个元素：

<img src="images/P-509-MyEgy 1.jpg" alt="Slide show" />

我的 javascript 代码如下所示：

$(document).ready(function(){
    var imagesArray = ['images/P-509-MyEgy 2.jpg', 'images/P-509-MyEgy 3.jpg', 'images/P-509-MyEgy 4.jpg', 'images/P-509-MyEgy 1.jpg'];
    var imagesIndex = 0;    
    function slideShow() {
        $('img').fadeOut(750, function(){
            $(this).attr('src', imagesArray[imagesIndex]).fadeIn(750);
        });
        imagesIndex++;
        if(imagesIndex >= imagesArray.length){
            imagesIndex = 0;
        }
        //alert(imagesIndex);
    } 
    setInterval(slideShow,1000);
});

评论的警报返回似乎是正确的（1/2/3/然后 0/1/2/3 等等）

Answer 1

浏览器在显示图像之前需要一些时间来加载图像。您可以将它们预加载到不透明度设置为 0 的 1x1 div 中，以确保它们从缓存中出来。该脚本位于 .ready 函数中，因此它将在图像加载完成后启动。