リンクをクリックすると、他のURLをロードするときにGIFアニメーションが停止しないようにします。

Question

リンクアニメーション（GIF）が表示され、次のURLはwindow.location.assign()でロードされます。

GIFアニメーションは1秒後に停止しますが、次のサイトはまだ読み込まれていません。次のサイトが表示されるまでアニメーション化するにはどうすればよいですか？

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％ズームで表示されます。