Предотвращение остановки 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-кратным увеличением.