I have been thinking of how to increase perceived performance for web
apps lately and came up with a nice (and simple) optimization for large files. I’ll
use an image gallery as a conceptual way to get my point across. I’m
not currently aware of any image galleries that do this, but I think it
would improve the user experience. Most (if not all) image galleries
have a main interface involving multiple pages of images. For this
example, we’ll consider that the user is currently viewing page 1. The
basic premise is that by using AJAX, we’ll load the images for page 2
into a hidden div on the page. The main reason for using ajax is so
that we can do all of the prefetching after the page has finished
loading. That way, we don’t hurt the performance of the visible page
in any way. The browser will cache the images and when the user
decides to view page 2, the images will not have to be re-downloaded.
For this example, I will use the prototype javascript library to handle
some of the details of the AJAX request, etc. If you prefer to use
your own library to accomplish the same thing, you wont hurt my
feelings 🙂 Also, keep in mind that this is just a proof of concept and could be modified for much more complex use cases.
In order to allow the current page to be downloaded and processed as
normal, I hook the load event for the current window. This gets fired
after the page has finished loading, so the user will be able to view
and interact with the page before we make the AJAX request to get the
next group of pictures. The result is that downloading the pictures for the next page in the gallery is transparent and doesn’t affect the user experience.
<script language=”javascript” type=”text/javascript”>
function PreLoadImages()
{
new Ajax.Updater(‘LoadImagesHolder’, ‘/GetImagesService.aspx?PageId=2’, {asynchronous:true});
}
Event.observe(window, ‘load’, function() { PreLoadImages()});
</script>
The html that gets returned from GetImageService.aspx is essentially just <img> tags. The previous code block inserts the returned html into a div with an ID of LoadImagesHolder:
<div id=”LoadImagesHolder” name=”LoadImagesHolder” style=”display:none;” > </div>
So putting it all together, the main page would look like the following. For sake of space, I omitted the main html representing the image gallery.
<html>
<head>
<script src=”prototype.js” type=”text/javascript”></script>
<script language=”javascript” type=”text/javascript”>
function PreLoadImages()
{
new Ajax.Updater(‘LoadImagesHolder’, ‘/GetImagesService.aspx?PageId=2’, {asynchronous:true});
}
Event.observe(window, ‘load’, function() { PreLoadImages()});
</script>
</head>
<body>
<!— *****************
** The main image gallery html would go here
***************** —>
<div id=”LoadImagesHolder” name=”LoadImagesHolder” style=”display:none;” > </div>
</body>
</html>
The other hidden bonus to this method is that it works with all browsers that support AJAX.
I have tested and verified it with Firefox 1.x and IE 6.x. So anyway, I hope this helps someone make the web seem faster.