Historia Api: Jak powiedzieć przeglądarce, że strona ładuje się?

Question

Pracowałem z interfejsem API historii podczas ładowania stron asynchronicznie za pośrednictwem javascript/jquery. Zastanawiam się, jak można powiedzieć przeglądarce, że strona ładuje się, aby przeglądarka mogła wyświetlić ładujący się obraz (np. Wirujące koło w firefoxie).

Edit:

Aby być bardziej konkretne:

Gdybym załadować stronę na mojej stronie internetowej, zmiany zawartości, nowa zawartość jest widoczna, ale Firefox nie pokazują kołowrotek jako sygnał , że strona ładuje się.

Jeśli otworzę zdjęcie z osi czasu na Facebooku, obraz się ładuje, zmienia się adres URL, a Firefox pokazuje obracające się koło, aby pokazać, że obraz ładuje się w tle.

Chcę też tego kołowrotka!

Answer 1

Cóż, żądanie asynchroniczne wie, że coś jest ładowane. Będziesz musiał sam propagować wydarzenie w innym miejscu. Na przykład, za pomocą haka beforeSend:

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

a następnie:

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

Radziłbym ci wyzwolić zdarzenie jednocześnie zaktualizowanie URL z historią API.

Answer 2

Przypuszczam ze znaczników używasz jQuery dla AJAX. Można użyć globalnych teleskopowe AJAX jak $.ajaxStart() i $.ajaxComplete() Będą strzelać niezależnie od tego, gdzie wywołać metodę ajax w kodzie

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

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

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

myślę ze swojego zapytania brzmieniem chcesz, aby móc kontrolować ładowanie obrazu na samej karcie przeglądarki. Nie możesz tego kontrolować. Korzystanie z własnego obrazu lub tekstu w obrębie strony jest bardziej widoczny dla użytkownika

EDIT Musisz podać własną animację ładowania w elemencie z id=myLoadingDiv dla tego kodu do pracy

Answer 3

Znalazłem odpowiedź na te pytania:

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

Źródło: jsFiddle

Skrypt tworzy element iframe, który jest wyzwalany przez ajax.start & ajax.stop-event.