use of "setTimeout" to repeat function causes browser to display "Loading..." message

Question

I have this banner rotator which is working fine except for one problem...

This rotator here first goes through the function and when it reaches the "setTimeout" statement it triggers the "cycle" function again and again.

You guys probably know that in Firefox there is a status-bar in the bottom-left corner, which says "loading" or "waiting for domain.com..." etc etc.

The problem is this; When you enter the website in Firefox, the status bar says "Loaded" and dissappears. Then after 8 seconds (the setTimeout delay) the status bar shows again and displays something like "Getting data from domain.com...". And it doesn't go away. This message is most likely caused by the setTimeout code, which triggers the function cycle over and over again.

Is there any way of "solving" this?

This probably happens in other browsers also, but so far I have only tested it in FF.

   function ban_rot(){

    //First preload images
// counter
       var i = 0;

    // create object
    imageObj = new Image();

    // set image list
    images = new Array();
    images[0] = "../Graphics/adv/1.gif"
    images[1] = "../Graphics/adv/2.jpg"

    // start preloading
    for (i = 0; i <= images.length; i++) {
        imageObj.src = images[i];
    }
    ///////////////////////
    var links = new Array("http://www.link1.com", "http://www.link2.se");
    var alts = new Array("alt1", "alt2");
    var titles = new Array("title1", "title2");

    var counter = 0;
    var banner_div = document.getElementById("ban_rot");
    cycle();

    function cycle() {
        if (counter == links.length) {
            counter = 0;
        }
        else if (counter < links.length) {
            banner_div.innerHTML = '<a href=\"' + links[counter] + '\"><img src=\"' + images[counter] + '\" border=\"1px\" style=\"border-color:#000;\" alt=\"' + alts[counter] + '\" title=\"' + titles[counter] + '\"></a>';
            //increase counter
            counter++;
        }
        setTimeout(cycle, 8000);
    } //end cycle function
} //end ban_rot function

Answer 1

The browser is showing a loading indicator because you're making it load a new image.