php - Javascript image rotator slow in older browsers

Solution:

One suggestion is not to usesetInterval. If the operation takes too long (in your case, longer than 3 seconds), the accumulated delay will cause your animation to get even worse.

To try my suggestion just callsetTimeout instead ofsetInterval, then at the end of yourmycode, you call setTimeout again. Ideally, you keep track of how late your function was called and adjust the interval passed to the next timeout.

For best results here at StackOverflow, posting an example on http://jsfiddle.net will let other people see the problem live and may help us help you.

Another suggestion

Cache your jQuery objects. For example instead of:

    $(this).removeClass();
    if($(this).next().length == 0){
        $('#alleplaatjes img').first().fadeIn(500);
        $('#alleplaatjes img').first().addClass('active');
    } else {
        $(this).next().fadeIn(500);
        $(this).next().addClass('active');
    }
Copy code

You should have

    // prepending jquery variables with $ to distinguish them
    var $this = $(this),
        $next = $this.next();
    $this.removeClass();

    if( $next.length == 0 ){
        var $first = $('#alleplaatjes img').first();
        $first.fadeIn(500);
        $first.addClass('active');
    } else {
        $next.fadeIn(500);
        $next.addClass('active');
    }
Copy code

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.