title: Loading images before cycling them as div background?
body: <p>I have a standard webpage developed in php using CSS and currently a bit of javascript to cycle through some images for a offers div. You can see the site <a href="http://jawsykilla.zxq.net" rel="nofollow">here</a>, this will not be it's final resting place this is a temporary site. If you look at the offers banner. When it switches to the next image it goes white whilst it loads the next image. Is there anyway of loading the next image before applying it to the div background property?
  Here is my javascript atm.</p>
  
  <pre><code>var c=0
  var s
  function offersCycle()
  {
    if (c%3==0){
    document.getElementById('offers').style.background = "url(/images/1.jpg)";
  }
  if (c%3==1){
    document.getElementById('offers').style.background = "url(/images/2.jpg)";
  }
  if (c%3==2){
    document.getElementById('offers').style.background = "url(/images/3.jpg)";
  }
  c=c+1
  s=setTimeout("offersCycle()",8000)
  </code></pre>
  
  <p>I tried using a set of new Images in the javascript and defining them before cycling them but they wouldn't apply to the CSS as this relies on a url and not an image itself? Any ideas appreciated.
  Cheers,
  Jordan</p>