GeekLab

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.© GeekLabInfo