I've been working with the history api while I loading pages asynchronously via javascript/ jquery. I wondering how it's possible to tell the browser, that the site is loading, so that the browser can show a loading picture (like the spinning wheel in firefox).

Edit:

To be more specific:

If I load a page on my website, the url changes, the new content is shown, but Firefox don't show the spinning wheel as a signal, that the page is loading.

If I open a picture from the timeline in Facebook, the image is loading, the url changes and Firefox shows the spinning wheel to show, that the image is loading in the background.

I want that spinning wheel too!

I've been working with the history api while I loading pages asynchronously via javascript/ jquery. I wondering how it's possible to tell the browser, that the site is loading, so that the browser can show a loading picture (like the spinning wheel in firefox).

Edit:

To be more specific:

If I load a page on my website, the url changes, the new content is shown, but Firefox don't show the spinning wheel as a signal, that the page is loading.

If I open a picture from the timeline in Facebook, the image is loading, the url changes and Firefox shows the spinning wheel to show, that the image is loading in the background.

I want that spinning wheel too!

• javascript
• jquery
• ajax
• api
• browser-history

3 Answers 3

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./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