防止 GIF 动画在加载其他 URL 时停止

Question

点击链接时，会出现加载动画 (GIF)，并通过 window.location.assign() 加载下一个 url。

GIF 动画在一秒钟后停止 - 尽管下一个站点尚未加载。在下一个站点出现之前，如何使其具有动画效果？

我想过将下一个站点加载到 var 中，然后通过 JS 显示，但我需要让浏览器的后退按钮正常工作。

有人知道如何实现这一目标吗？

Answer 1

首先需要通过AJAX加载页面并手动显示：

url = '/api/html?profile=12345';
$.ajax({
    url: url,
    dataType: 'html'
}).always(function(response, status) {
    if ('success' !== status) {
        alert('Error loading page...');
        return;
    }

   //store state for the back and refresh button handler
   if (window.history) {
        history.replaceState({
            reloadUrl: location.href
        }, '', location.href);
        history.pushState({
            reloadHtml: response
        }, '', url);
    } //if(window.history)

    //render new page into current window
    document.open('text/html','replace');
    document.write(response);
    document.close();     
});

要使 back、forward 和 refresh 按钮起作用，您必须添加自己的处理程序，该处理程序将根据保存状态：

var allowPopState = false; //fixes popstate in Safari that fires it on every page load
$(function() { setTimeout('allowPopState = true;', 1); }); 

$(window).on('popstate', function(event) {
    if (!history.state) { return; }
    if (!allowPopState && document.readyState === 'complete') {
        event.preventDefault();
        event.stopImmediatePropagation();
        return;
    }

    if (history.state.reloadHtml) {
        document.open('text/html','replace');
        document.write(history.state.reloadHtml);
        document.close();
    } else if (history.state.reloadUrl) {
        if (history.state.reloadUrl === location.href) {
             location.reload();
        } else {
            location.replace(history.state.reloadUrl);
        }
    }
});

这不会完全保留动画，但会最小化浏览器加载和呈现新页面的时间，并允许动画在页面加载时继续。

为了让它更好，你需要为下一页缓存所有资源或在下一页使用延迟加载。

---

已知错误：在桌面版 Firefox 中，这将重置页面缩放（CTRL + +/- 或 CTRL + 滚动）。例如当您将当前页面缩放到 200% 时，下一页将以 100% 缩放显示。