Category: IT

For a customer, I'm building a website that has a pretty large header jpeg that is different for every single page. To speed up loading several pages, I've taken several steps:

1. Force browser caching

You can tell a browser to keep certain files in cache longer than normal. In apache, update the virtual host configuration or put this in a .htaccess file:
<FilesMatch "\.(jpg|jpeg|png|gif|swf|css|ico|js)$">
ExpiresActive On
ExpiresDefault A864000
</FilesMatch>

2. Install libraries

2a jQuery
On this site, I'm using jQuery to perform some tasks. As it was loaded anyway, I can use it for this task as well. So, download jQuery here and install it like:
<script type='text/javascript' src='/lib/jquery.js'></script>

2b jQuery cookie
Download the jQuery cookie plugin (by Klaus Hartl) as well
<script type='text/javascript' src='/lib/jquery.cookie.js'></script>

2c jQuery cookie
The last lib is a image preloading plugin for jQuery, that I found on engineeredweb.com:
(function($) {
var cache = [];
// Arguments are image paths relative to the current page.
$.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i--;) {
var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
})(jQuery)
You can put it in a separate file, for example jquery.preload.js. And again, load it: <script type='text/javascript' src='/lib/jquery.preload.js'></script>

3. Put it all together

jQuery(document).ready(function(){
if(jQuery.cookie("preload")==null){
try{
jQuery.preLoadImages("header1.jpg","header2.jpg");
}catch(e){}
jQuery.cookie("preload",1,{path:"/"})
}
});'

This means:
jQuery(document).ready( = wait until document is completely loaded before starting new downloads.
if(jQuery.cookie("preload")==null){ = only try to fill the cache when cookie 'preload' is not found, ie. once per session
jQuery.cookie("preload",1,{path:"/"}) = set the cookie so this routine will not be executed again during this session.