大网站如何防止选项卡上的加载圈显示？

Question

好吧，我不知道如何向您解释，这可能只是我的互联网，或者我的网站速度较慢，或者他们真的有这样做的技术。

如果您访问 Facebook、Reddit、Youtube、Twitter，并且单击这些网站上的链接或任何操作，url 会发生变化，但浏览器选项卡不会显示任何加载圆圈。

他们是怎么做到的？

我很确定我的网站足够快，有时它的加载速度甚至比大网站还快，但我的网站在浏览器选项卡上显示加载圆圈。

Answer 1

好的，我找到了答案。这是无需重新加载页面即可更改 url 的技术。

Updating address bar with new URL without hash or reloading the page

How do I modify the URL without reloading the page?

我仍在尝试弄清楚如何在不重新加载整个页面的情况下重定向实际页面。我猜他们是通过 ajax 或类似 url 更改的方式加载它。一旦我弄明白了，我会更新这个。

编辑：我目前正在为我的网站开发此功能。技术是使用ajax加载基于url的内容。当我使用此功能更新我的网站时，我会更多地更新此线程。

编辑 2：该死，您可能会遇到与我在不使用 onhashchange 的情况下尝试检测 url 更改时遇到的相同问题。如果是这样，给你：

How to detect URL change in JavaScript

这真的花了我 4 个小时才算出来......

编辑 3：我现在已经在我的网站上集成了这个功能。您可以在

查看

Grandweb

它非常简单，但是一旦通过 ajax 检索到内容，就需要做很多工作。所以这是过程：

我正在使用 pushState();无需重新加载页面即可更改 url。

    var url = $(this).attr('href');
    var split_url = url.split('/');
    var new_url = url.replace('https://grandweb.net/','');
    window.history.pushState("object or string", "Title", "/write");

使用 'mouseup' 是个坏主意，我改变了主意。 ~~然后我必须使用 'mouseup' 触发第一个函数以通过 ajax~~ 检索内容，然后为下一个监听成功的 onpopstate()，因为一些鼠标 4 或鼠标 5 等鼠标操作绑定到浏览器的后退和前进按钮，不会通过 'mouseup'.

触发

    $(window).on('mouseup', function(evt) {
          get_content();
    }

    window.onpopstate = function(event) {
          get_content();
    }

~~第一个负责在第一次尝试时触发函数，因为 onpopstate 仅在浏览器的历史记录 API 被填充时才监听~~ 。使用 mouseup 是一个坏主意，基本上，除非你真的想从文档的任何地方检测鼠标操作，否则不要使用它。

我改为使用锚 tags/links 来触发检索内容的第一个函数。

示例：

<a class="dynamic_btn" href="website.com/post">Home</a>

然后

$(document).on('click','.dynamic_btn',function(e){
    e.preventDefault();
    get_content();
});

如果您的 url 上有哈希值，则可以使用 onhashchange。我不在我的 url 上使用哈希，所以基本上 onhashchange 在我的用例中是无用的，除非我不知道什么。

检索内容后，我通过创建 DOM 元素将它们附加到页面中的现有容器。

如果您打算更改页面中的少数元素或容器，这会更容易做到。如果您打算这样做来更改整个页面布局，祝您好运。这是可行的，但它真的很痛苦。

观察 Facebook 后，我了解到他们并未在所有 links/features 中实施此技术。这是有道理的，因为这更难维护，尤其是因为这里的大部分工作都是在客户端完成的。不过这很好，因为页面无法加载。

我已经在我网站的几个 'essential' 功能上实现了它，例如查看帖子和返回主页。我可以在整个网站上实施它，但我仍在决定。就这些，非常感谢您阅读网络陌生人

大网站如何防止选项卡上的加载圈显示？

How do Big sites prevent the loading circle on tabs from showing?

loading

social-networking