링크를 클릭하면 다른 URL을로드 할 때 GIF 애니메이션이 중지되지 않도록합니다.

Question

로드 애니메이션 (GIF)이 나타나고 다음 URL은 window.location.assign()을 통해로드됩니다.

GIF 애니메이션이 1 초 후에 멈 춥니 다. 다음 사이트가 아직로드되지 않았지만. 다음 사이트가 나타날 때까지 어떻게 애니메이트 할 수 있습니까?

var에 다음 사이트를로드 한 다음 JS를 통해 표시하는 방법에 대해 생각했지만 브라우저의 뒤로 버튼을 사용해야합니다.

누군가 어떻게 생각하나요? AJAX를 통해 페이지를로드하여 수동으로 표시 할 수

Answer 1

먼저 필요 : 표시 할 것

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 % 확대/축소로 표시됩니다.