防止GIF動畫停止，加載其他URL

當單擊鏈接時，會出現加載動畫（GIF）並且下一個url通過window.location.assign()加載。防止GIF動畫停止，加載其他URL

GIF動畫在一秒鐘後停止 - 儘管下一個網站尚未加載。在下一個網站出現之前，我如何製作動畫效果？

我想過把下一個網站加載到一個var，然後通過JS顯示它，但我需要瀏覽器的後退按鈕工作。

有人知道如何做到這一點嗎？

來源

2016-09-14 crunchy

這是瀏覽器試圖擦除舊的並在選項卡上加載新內容。似乎出於javascript的擔憂。 – Sharky

它是由瀏覽器引起的 - 它會在頁面從服務器加載時生成動畫，但一旦開始分析就停止動畫。如果它是一個大頁面，它將是顯而易見的。 –

首先需要通過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％縮放顯示。

來源

2016-09-14 10:29:54

我很好奇，什麼是'setTimeout（'allowPopState = true;'，1）;'應該做..？甚至包裝到'$（function（）{'...？ – davidkonrad

@davidkonrad對不起，它被複制和粘貼錯誤放置，應該放置在popstate處理程序之前。它修復Safari中的popstate，它在文檔之前觸發它已經準備就緒，'$（）'中的超時可以確保在文檔準備好並且所有'onready'處理程序完成後立即調用它。 –

防止GIF動畫停止，加載其他URL

回答

相關問題