Ajaxorized

Speed up your users browsing experience: preloading hyperlinks

July 27, 2008

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: del.icio.us Reddit Slashdot Digg Facebook Technorati Google StumbleUpon Windows Live Yahoo
topFiled under: Prototype, Javascript | Willem @ 12:13 pm |

2 Comments

RSS feed for comments on this post. TrackBack URL

  1. Hello.
    Interesting !
    And how do you use the preloaded page ? How do show the user ?
    Thank you

    Comment by andrei — July 27, 2008 @ 10:06 pm

  2. You could shorten the code by a couple of lines by changing this:

    $$(’a').each(function(e) {
    if(e.getAttribute(’rel’) == ‘load’) {

    to this:

    $$(’a[rel=”load”]’).each(function(e) {

    Comment by seengee — July 28, 2008 @ 11:04 am

Leave a comment

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word