javascript - Chrome 并不总是使用 JavaScript setInterval() 重复事件

Question

我想在同一位置显示多张相同大小的图像，一次一张，每次更改之间间隔 5 秒。为此，我使用了 jQuery.Timer，它使用 setInterval() 每 5 秒调用一些 show_next_image() 函数。

它实际上可以与 IE、Opera、Safara、Firefox 以及……部分与 Google Chrome 配合使用。如果我打开一个新窗口并直接输入我的网站 URL，则它无法与 Google Chrome 一起使用:它将显示第二张图像并停止。在任何其他情况下(从另一个链接重新加载，而不是在打开新窗口后立即重新加载)，它都会很糟糕:人们可以在显示正面图像之前看到背面图像。

因此我想知道我的 JavaScript 源代码是否做错了。我所做的是使用正面和背面图像。当我想显示下一张图像时，通过jQuery将后面的img源设置为新图像，并且前面的图像淡出，而后面的图像淡入。您可以通过http://www.laurent-carbon.com/查看(法语)。这两个img分别用bg1和bg2来标识。

var images = ["/img/IMG_0435bg.jpg", "/img/IMG_0400bg.jpg", "/img/maisonnette 2.jpg", "/img/IMG_0383bg.jpg", "/img/IMG_0409bg.jpg", "/img/IMG_0384bg.jpg"];
var idx = 1;
var waitTime = 5000; // ms

$(document).ready(function() {
    $("#bg2").hide();
    $.timer(waitTime, load_next);
    $.preLoadImages(images);
});

function load_next(timer) {
    var toshow = images[idx];
    idx++;
    idx %= images.length;

    back_image().attr('src', toshow);

    swap_images();
}

function front_image() {
    return (idx % 2 == 0) ? $("#bg1") : $("#bg2");
}

function back_image() {
    return (idx % 2 == 0) ? $("#bg2") : $("#bg1");
}

function swap_images() {
    back_image().fadeOut('slow');
    front_image().fadeIn('slow');
}

谢谢， 锡洛

Answer 1

好吧，我已经找到了一个解决方案......不使用插件。

演示

http://jsfiddle.net/morrison/PvPXM/9/show

来源

http://jsfiddle.net/morrison/PvPXM/9/

这种方法更加简洁，消除了我在 Chrome 中查看页面时遇到的问题:动画不同步和闪烁。

您在 HTML 中唯一要做的就是将两个图像包装在 <div id="fadeBox" style="position:relative"></div> 中。

$(function() {
    var images = [
        "http://www.laurent-carbon.com/img/IMG_0435bg.jpg",
        "http://www.laurent-carbon.com/img/IMG_0400bg.jpg",
        "http://www.laurent-carbon.com/img/maisonnette 2.jpg",
        "http://www.laurent-carbon.com/img/IMG_0383bg.jpg",
        "http://www.laurent-carbon.com/img/IMG_0409bg.jpg",
        "http://www.laurent-carbon.com/img/IMG_0384bg.jpg"
        ];
    var idx = 1;
    var max = images.length;
    var easing = "swing";
    var waitTime = 5000; // ms
    var fadeTime = 2000; // ms
    var fadeShow = function(fadeTime, fadeDelay) {
        var $topImage = $("#fadeBox img:last");
        $topImage.fadeTo(fadeDelay, 1, function() {
            $topImage.fadeTo(fadeTime, 0, easing, function() {
                $topImage
                    .fadeTo(0, 1)
                    .insertBefore("#fadeBox img:first")
                    .attr("src", images[++idx == max ? idx = 0 : idx]);
                fadeShow(fadeTime, fadeDelay);
            });
        });
    };

    fadeShow(fadeTime, waitTime);
});

希望这有帮助

PS，感谢 Levi 清理了代码。