preload="true" 超链接

Question

是否有方法、javascript 脚本或任何可以允许在页面中预加载超链接的方法？例如，我希望当用户来到http://ahostel.lt/ 并且页面完全加载时，脚本将开始预加载导航中的其他页面（预订、地图、设施、环顾四周，[...]）。因此，当用户单击任何这些超链接时，页面将立即加载。如何做到这一点？

Answer 1

你可以这样做：

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

它们不是图像，但浏览器不知道这一点。您可能需要放慢速度，以免过度阻塞连接：

$(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 对要获取的“危险”链接提出了非常好的观点。将某些链接标记为“noPrefetch”（作为类或其他东西）可能会更好，或者仅使用“prefetch”类显式标记的预取链接。

Answer 2

HTML5 规范中实际上对此做了规定，尽管目前只有 Firefox 支持。

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

只是把它作为非 javascript 的替代品扔给你。

Answer 3

没试过，但是根据this blog post，你可以这样做：

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

你应该小心，但如果你有像注销这样的链接，用户可能会被注销。 See Wikipedia for more problems with prefetching.