Load image before rendering for JavaScript slideshow for mobile browser
<p>Can someone please tell me what is wrong with this code (other than the fact that it is probably poorly written...)? I am trying to create a slideshow in JavaScript for a mobile browser. The "seamless" thing is to load the image before switching the background image. I tested a previous version of the script on my iPhone and the screen became white for 2 seconds while the image was loading. I am trying to solve that problem. </p>

<pre><code>&lt;script&gt;
var i = 1;
var imgnumber = 112;
function randomimage() {
    if(i &lt;= 200) {
        var imgnumber = Math.ceil(Math.random() * 800);
        var loadimage = document.getElementById("seamless");
        loadimage.setAttribute("src", 'http://www.url.com/images/' + imgnumber + '.jpg');
        timer = setTimeout("changebackground()", 3500);
        i++;
    }
}

function changebackground() {
    var bg = 'http://www.url.com/images/' + imgnumber + '.jpg';
    document.body.background = bg;
}
&lt;/script&gt;&lt;/head&gt;
&lt;body background="http://www.url.com/images/543.jpg" onload="randomimage()"&gt;
&lt;img id="seamless" src="http://www.url.com/images/543.jpg" height="1" width="1" style="z-index:-1;" /&gt;&lt;/body&gt;
</code></pre>
