Image Preloader

This is a neat trick which I found (and subsequently used) here.

Basically this is a small jQuery snippet which goes through your stylesheets and looks for images and caches them, so that they are not loaded when the user interacts with a link, logo, overlay window etc.

Here it is:

function preLoadImages () {
    $.get($('link[rel="stylesheet"]')[0].href, function(data){
        r = /url\(['|"]?(\S+\.(gif|jpg|jpeg|png)[^'(]*)['|"]?\)/ig;
        while (match = r.exec(data)){
            var cacheImage = document.createElement('img');
            cacheImage.src = match[1];
        }
   });
}
preLoadImages();
Advertisements