JavaScript Image Preload
<p>I'm looking at how a site <a href="http://donothingfor2minutes.com" rel="nofollow">DoNothingFor2Minutes</a> preloads its images with JavaScript and it's given rise to a few questions. I noticed that the site doesn't preload all of its images. Indeed, some of the first images you might see on the site aren't preloaded, including both the background image (of the sea and sun) and the title image (which says "do nothing for 2 minutes")</p>

<p>1) is there a reason why you wouldn't preload the images that are used immediately on the page?</p>

<p>2) does it make sense or is it even possible to preload background images?</p>

<p>3) when I view the page source, I see many images that weren't preloaded, but not images that were preloaded (with the exception of spread-the-calm.png). Is there some reason preloaded images aren't in the page source?</p>

<p>Thanks for helping out. I'm a bit of a newbie </p>

<pre><code>var preload = function(sources) {
          var images = [];
          var length = sources.length;
          for(var i = 0;  i &lt; length; i++) {
            images[i] = new Image();
            images[i].src = sources[i];
          }
        }

        preload(['facebook.png', 'facebook-hover.png', 'twitter.png', 'twitter-hover.png', 'like-background.png', 'spread-the-calm.png', 'tewy.png', 'tewy-hover.png', 'coderholic.png', 'coderholic-hover.png', 'box.png', 'box-hover.png', 'email-capture.png']);
</code></pre>
