Often, users navigate the same way through web pages. When considering this, you are able to optimize the users browsing experience by preloading web pages that are likely to be clicked next. I coded this tiny piece of javascript that loops through your hyperlinks, checks if "load" is in the rel-property, and loads the page from the href in an hidden iframe. Make sure you are using prototype.

document.observe('dom:loaded', function() {
$$('a').each(function(e) {
		if(e.getAttribute('rel') == 'load') {
			p_sHref = e.getAttribute('href');
			if(/^#/.match(p_sHref) ||  p_sHref == '' || !p_sHref) return;
			l_oIframe = new Element('iframe', {src:p_sHref} ).hide();
			document.body.appendChild(l_oIframe);
		}
	});
});


When you want a preload of you link, simply use the rel property:

<a href = "http://www.natures-desktop.com/images/Wallpaper/widescreen1920x1200/coast-beach/Southwold-Beach1.jpg" rel = "load">Testlink</a>

I'd like to hear you thoughts on this.

Add to: