Question

点击链接时，会显示加载动画（GIF），并通过window.location.assign()加载下一个网址。

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();     
});

要使返回，转发和刷新按钮有效，您必须添加自己的处理程序，该处理程序将根据以下内容显示或重新加载页面保存状态：

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％缩放显示。

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

1 个答案: