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

Question

当单击链接时，会出现加载动画（GIF）并且下一个url通过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％缩放显示。