Question

I’ve created a simple image rotator with javascript, but it’s slow with “older browsers” (for example IE 6 , 7 and 8). Images will load first I think, then start the rotator.. Some tips to make it faster?

Why I created a rotator by myself? All the rotators I’ve found cut (cropped) the images. I need the full image… with when necessary some white space left/right or top/bottom.

Javascript part:

//Loop through pictures
var tid = setInterval(mycode, 3000);
function mycode() {

    if($.random(0,1) == 1){
        //Fade
        $('#alleplaatjes img.active').fadeOut(500,function(){
            $(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');
            }
        });
    } else {
        //Slide
        $('#alleplaatjes img.active').slideUp(500,function(){
            $(this).removeClass();

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

PHP part:

<?php

$dir = "/home/zwuq/domains/***/public_html/afbeelding/";
foreach(glob($dir."*") as $file){
    $afbeelding = 'afbeelding/'.str_replace($dir, '', $file);
    $toevoeging = FALSE;
    if(!$eerste_plaatje){
        $toevoeging = ' class="active"';
        $eerste_plaatje = $afbeelding;
    }
    $plaatjes .= '<img'.$toevoeging.' src="'.$afbeelding.'" style="max-width: 99%; max-height: 99%;">';
}

?>

HTML part:

<div id="alleplaatjes" style="width:100%; height:100%; margin:0px; padding:0px; z-index:1; text-align: center;">
    <? echo $plaatjes; ?>
</div>

Answer 1

One suggestion is not to use setInterval. 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 call setTimeout instead of setInterval, then at the end of your mycode, 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');
    }

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');
    }