动画中的预取链接

Question

我试图使一个网站有更顺畅的页面过渡，所以我使用动画淡出页面，并在新的网页淡出。

我使用这段javascript来确保页面在实际导航发生之前首先褪色：

var menu  = document.getElementsById("menu");
var links = menu.getElementsByTagName("a");
for (var i = 0; i < links.length; i++ ) {
    (function(link){
        addEvent(link, "click", function(e) {
            e.preventDefault();                
            addClass(main, "fade-out");
            setTimeout(function(){
                location.href = link.href;
            }, 300);
            return false;
        });
    })(links[i]);
};

从setTimeout调用中可以看到，动画使用的是0.3s (实际的动画是在css文件中定义的，类为.fade-out)。

虽然动画工作非常好，但不使用动画时间已经开始获取单击的url似乎有点浪费。

我怎样才能做到这一点？请注意，这里有几件事要注意：

• 导航是一个实际的浏览器导航(而不是替换当前页面内容的javascript )。
• 我不认为仅仅在后台启动ajax请求是可行的，因为这可能会在可用的.3s中完成，因此会被浏览器中止。然后浏览器将再次重新获取页面(并且不会获得任何收益)。不过，我可能弄错了。

Answer 1

您可能需要查看链路预取。

网页向浏览器提供一组预取提示，在浏览器加载完该页之后，在空闲时间过去后，它开始悄悄地预取指定的文档，并将它们存储在其缓存中。当用户访问一个预取的文档时，它可以快速地从浏览器的缓存中得到服务。

来源：预取