Chrome doesn't always repeat events with JavaScript setInterval()

I want to display several images of the same size at the same position, one at a time, with a 5s interval between each change. To do so I've used jQuery.Timer, that uses setInterval() to call some show_next_image() function every 5s.

It actually does work with IE, Opera, Safara, Firefox and.. partly with Google Chrome. It's not working with Google Chrome if I open a new window and directly type my website URL: it'll show the second image and stop. And with any other situation (reload, from an开发者_如何学编程other link, not right after opening a new window) it'll badly work: one can see the back image before the front image is shown.

Thus I'm wondering whether I've done something wrong with my JavaScript source. What I do is I use a front and a back image. When I want to show the next image, the back img source is set to the new image, and the front image is faded out while the back one is faded in through jQuery. You can check it out at http://www.laurent-carbon.com/ (in French). The two img are identified with bg1 and 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');
}

Thanks, Ceylo

---

Ok I've worked out a solution .... without the use of plugins.

Demo

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

source

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

This approach is a lot cleaner and removes the problem I had while viewing your page in chrome: the animation getting out of sync and flashing.

The only thing you have to do in the HTML is wrap the two images in a <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);
});

Hope this helps

PS thanks to Levi for cleaning the code up a bit.

---

Answer: http://jsfiddle.net/morrison/RxyZY/

Notes:

• You are trying to reinvent the wheel. You are creating a simple slideshow. There are numerous plugins to do exactly this and much more. I used jQuery cycle in my example, which is extremely customizable.
• You should wrap your stuff up in a function, creating an expression. In my example, the (function($){}(jQuery)) is what does the trick. It scopes your variables to the function, rather than the global namespace.