1

Is there a method, javascript script or anything that could allow to preload hyperlinks in the page? For instance, I want that when user comes to http://ahostel.lt/ and the page fully loads, the script would start preloading other pages in the navigation (Booking, Map, Facilities, Look around, [...]). So when user clicks on any of those hyperlinks, page would load instantaneously. How this can be done?

animuson
  • 53,861
  • 28
  • 137
  • 147
Gajus
  • 69,002
  • 70
  • 275
  • 438

3 Answers3

2

You could do something like this:

$(function() {
  $('a').each(function() {
    new Image().src = $(this).attr('href'); // or just this.href
  });
});

They're not images, but the browser doesn't know that. You might want to slow that down a little so as not to choke the connection too much:

$(function() {
  var urls = $('a').map(function(_, a) { return a.href; }).get(0);
  var i = 0;
  function fetchOne() {
    if (i === urls.length) return;
    var img = new Image();
    img.load = fetchOne;
    img.src = urls[i++];
  };
  fetchOne();
});

edit — @Adam makes a really good point about "dangerous" links to fetch. It might be better to have some links marked as "noPrefetch" (as a class or something), or alternatively to only prefetch links marked explicitly with the class "prefetch".

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • *cough* `this.href` *cough* :) – Nick Craver Jul 19 '10 at 22:05
  • OK Nick - I'm sensing that you're on a mini-crusade :-) – Pointy Jul 19 '10 at 22:08
  • Make sure to use `var urls = $('a').map(function(i, a) { return a.href; }).get(0);` or `var urls = $('a').map(function() { return this.href; }).get(0);`, the first param is the index :) – Nick Craver Jul 19 '10 at 22:09
  • Thanks Nick - it always drives me nuts that ".map()" and ".each()" are different and generally I have to check api.jquery.com every time I type it in!! – Pointy Jul 19 '10 at 22:11
1

Have not tried it, but based on this blog post, you could do the following:

$("a").each(function(){
  $.ajax({ url:$(this).attr("href"), cache:true, dataType:"text" });
});

You should be careful though if you have links like Logoff the user could get logged off. See Wikipedia for more problems with prefetching.

Adam
  • 43,763
  • 16
  • 104
  • 144
  • Well, I want to allow clients to select which pages to prefetch, for instance with a selector $('a[prefetch="true"]'). The problem, however, is that it would attempt to prefetch all pages every time user goes to other page in the navigation. – Gajus Jul 19 '10 at 22:12
  • Those issues with prefetching are all real, but most of them are moot if you're talking about prefetching your own pages from your own site. If the links are *not* to ones own site, then I totally agree that it's a pretty rude practice. – Pointy Jul 19 '10 at 22:13
  • @Guy unless we're talking about zillions of links here, a redundant prefetch is probably going to be pretty cheap because the browser's going to see that it's cached. Again, however, if there are too many links it could become a problem. – Pointy Jul 19 '10 at 22:14
  • @Guy assuming the browser has some caching those requests made to prefetch from the next page will be really fast or not made at all. This depends on the Cache headers your web server is putting out as well. – Adam Jul 19 '10 at 22:17
  • @Pointy. I agree if you are careful prefetching is OK on your own site. I made my last comment before I saw yours, sorry for the redundancy. – Adam Jul 19 '10 at 22:19
1

There's actually provision in the HTML5 spec for this, though it's currently only supported by Firefox.

<link rel="next" href="page2.html">

Just throwing this to you as a non-javascript alternative.

Malabar Front
  • 624
  • 9
  • 14
  • I think you also need to indicate prefetch attribute http://browserspy.dk/prefetch.php. – Gajus Jul 19 '10 at 22:57