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。）

虽然动画效果非常好，但不使用动画似乎有点浪费已经开始获取点击的网址的时间。

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

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

Answer 1

您可能需要查看link prefetching。

网页为浏览器提供了一组预取提示，以及浏览器完成加载页面后，以及空闲时间之后已经过去了，它开始默默地预取指定的文件，将它们存储在缓存中。当用户访问其中一个预取文档，它可以快速从浏览器的缓存中提供。

来源：http://en.wikipedia.org/wiki/Link_prefetching

动画期间预取链接

1 个答案: