Video - Make Your Webpage Load Faster by Prefetching Resources
This video by Shawn Brenneman, Google software engineer on Picasa Web Albums,
explains how pre-fetching can speed up the downloading of images on your webpage.
Image pre-fetching is a technique to make the browser load and decode resources early.
Image pre-fetching can be used to create smooth image transition effects. You might
have noticed that the first time you click on a button, the transition is not smooth.
The solution is to make the browser load the image and keep it in cache.
Large image files take longer to download than the HTML on a webpage. The sooner
that you make the request for the image file, the sooner the webpage gets downloaded.
If you make the request at the begiining of the HTML page, the image and the HTML
code will get to the user at about the same time.
var myImage = new Image();
myImage.src = "imagename.gif";
<img src="imagename.gif" />
Prefetching applies to more than just image files, it also applies to other web
page resources like Java Script code files and Style code files. If you make the
requests for these resources at the begiining of the HTML page they can all get to
the user at about the same time.