History Api: How to tell the browser, that the page is loading?

I found the answer in these question:

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

Source: jsFiddle

The script creates an iframe, which is triggerd by the ajax.start & ajax.stop-event.

Well, the async request knows something is being loaded. You'll just have to propagate the event elsewhere yourself. For instance, using the beforeSend hook:

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

and then:

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

I would advise you to trigger the event at the same time you update your URL with the history API.

I assume from tags you are using jQuery for your AJAX. You can use global AJAX handlers like $.ajaxStart() and $.ajaxComplete() These will fire regardless of where you call an ajax method within your code

$('#myLoadingDiv').ajaxStart(toggleLoading).ajaxComplete(toggleLoading);function toggleLoading(){   $(this).toggle();}

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

I think from your question wording you want to be able to control the loading image on the actual browser tab itself. You can't control that. Using your own image or text within page is also more visible to user

EDIT You must provide your own loading animation in an element with id=myLoadingDiv for this code to work