History Api: come dire al browser che la pagina si sta caricando?

Question

Ho lavorato con la storia API mentre caricavo le pagine in modo asincrono tramite javascript/jquery. Mi chiedo come sia possibile dire al browser che il sito sta caricando, in modo che il browser possa mostrare un'immagine di caricamento (come la ruota che gira in Firefox).

Edit:

Per essere più precisi:

Se carico una pagina sul mio sito, l'URL cambia, il nuovo contenuto viene visualizzato, ma Firefox non mostrano la ruota che gira come un segnale , che la pagina si sta caricando.

Se apro un'immagine dalla timeline in Facebook, l'immagine si sta caricando, l'url cambia e Firefox mostra la ruota che gira per mostrare che l'immagine si sta caricando sullo sfondo.

Anche io voglio quella ruota!

Answer 1

Bene, la richiesta asincrona sa che qualcosa viene caricato. Dovrai semplicemente propagare l'evento altrove. Ad esempio, utilizzando il gancio beforeSend:

$.ajax('/your_stuff', 
     beforeSend: function() { 
     $(document).trigger('loading'); 
     } 
     ....) 

e poi:

$(document).on('loading', function() { alert("request is loading");} 

io vi consiglio di attivare l'evento allo stesso tempo, si aggiorna l'URL con l'API storia.

Answer 2

Presumo dai tag che stai usando jQuery per la tua AJAX. È possibile utilizzare i gestori di AJAX globali come $.ajaxStart() e $.ajaxComplete() Questi sparerà a prescindere da dove si chiama un metodo di Ajax all'interno del codice

$('#myLoadingDiv').ajaxStart(toggleLoading).ajaxComplete(toggleLoading); 

function toggleLoading(){ 
    $(this).toggle(); 
} 

riferimento API http://api.jquery.com/ajaxStart/

Credo che dalla tua domanda espressione che volete essere in grado di controlla l'immagine di caricamento sulla scheda del browser stesso. Non puoi controllarlo. Utilizzando la propria immagine o il testo all'interno della pagina è anche più visibile per l'utente

EDIT È necessario fornire la propria animazione di carico in un elemento con id=myLoadingDiv per questo codice per lavorare

Answer 3

ho trovato la risposta a queste domande:

How to have AJAX trigger the browser's loading

var i = $('<iframe>'); 
console.log(i); 
i.appendTo('body'); 
function start() { 
    i[0].contentDocument.open(); 
    setTimeout(function() { 
     stop(); 
    }, 1000); 
} 
function stop() { 
    i[0].contentDocument.close(); 
    setTimeout(function() { 
     start(); 
    }, 1000); 
} 

start(); 

Fonte: jsFiddle

Lo script crea un iframe, che viene attivato dall'ajax.start & ajax.stop-event.