javascript - 悬停时预加载页面并单击链接

我正在尝试在将鼠标悬停在按钮上时使用 ajax 预加载页面的可能性，并在单击此按钮时更快地提供此页面。我刚刚开始，无法真正找到一个好的解决方案/可能是完全错误的。这是我尝试过的，看起来对我来说有点希望:

document.getElementById('link').addEventListener('mouseover',function() {
    var r = new XMLHttpRequest();
    r.open("POST", "index.php", true);
    r.onreadystatechange = function () {
        if (r.readyState != 4 || r.status != 200) return;
         document.getElementById('link').addEventListener('click',function() {
            window.location.assign('index.php');
        });
    };
    r.send('');
});

但我不认为这样可以。

有人可以在不共享代码/解决方案的情况下为我指明方向吗？我主要感兴趣的是如何自己实现这一目标 - ajax 是正确的开始方式吗？

我正在寻找仅 JavaScript 的解决方案

最佳答案

您需要一个框架来替换页面内容并管理 URL 中的内容，而无需向服务器发送另一个请求并重新加载页面。

Push state可以帮助进行 URL 操作。

当您收到部分 HTML 时，您需要替换页面正文(或更少，具体取决于您的标记，可能只是 #container 内的所有内容或页面上的任何内容)通过 AJAX 从您的服务器获取。

看看 Rails 的 TurboLinks 是如何工作的使用名为 PJAX 的方法来快速导航页面。然后，悬停时的预取可以分层在类似的方法之上。

更多阅读:http://pjax.herokuapp.com/

关于javascript - 悬停时预加载页面并单击链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27112839/