Empêche l'arrêt de l'animation GIF, lors du chargement d'autres URL

Question

lorsqu'un clic est effectué sur un lien, une animation de chargement (GIF) apparaît et l'URL suivante est chargée via window.location.assign().

l'animation GIF s'arrête après une seconde - bien que le site suivant ne soit pas encore chargé. Comment puis-je l'animer jusqu'à ce que le site suivant apparaisse?

J'ai pensé à charger le site suivant dans un var puis l'afficher via JS, mais j'ai besoin que les boutons du navigateur fonctionnent.

Est-ce que quelqu'un a une idée de comment y parvenir?

Answer 1

devez d'abord charger la page via AJAX et afficher manuellement:

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();  
}); 

Pour faire le retour, avant et rafraîchir boutons fonctionnent, vous devez ajouter votre propre gestionnaire qui affichera ou recharger la page en fonction de l'état enregistré:

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); 
     } 
    } 
}); 

Ceci ne conservera pas complètement l'animation mais minimisera le moment où le navigateur charge et restitue la nouvelle page et permet à l'animation de continuer pendant le chargement de la page. Pour le rendre encore meilleur, vous auriez besoin de mettre en cache toutes les ressources pour la page suivante ou utiliser le chargement paresseux sur la page suivante.

---

Bug connu: dans Firefox de bureau, ce réinitialisera zoom page (CTRL + +/- ou faire défiler CTRL +). par exemple. Lorsque vous zoomez sur la page actuelle à 200%, la page suivante sera affichée en zoom 100%.