Image Prefetch Test
Harry Roberts wrote an excellent article on front-end performance. In the article he covers image prefetching, and mentions it may or may not work; citing two opposing articles.
Out of curiosity, I threw together a quick test to see if I could prefetch an image using the following method:
<link rel="prefetch" href="image-name.jpg">It’s typically a bad practice to specify background-image on :hover without a sprite. However, in this case it’s perfect for testing whether an image was prefetch’d or not.
At the time of this writing, using the prefetch technique above, the image was not pre-loaded in Firefox 18.0, Chrome 24.0 or Internet Explorer 10.0.
Update: Firefox is the only browser I tested which did pre-load the image. I believe I was hovering the boxes too close to page load on my initial test. After seeing the waterfall posted below I tried again, clearing cache in all the browsers, loading the page and waiting a bit longer before hovering. Regardless, this method probably isn’t ready for primetime until there is better browser support.