13

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!

pnuts
  • 58,317
  • 11
  • 87
  • 139
Olli
  • 401
  • 5
  • 16

3 Answers3

8

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.

Community
  • 1
  • 1
Olli
  • 401
  • 5
  • 16
0

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.

ChuckE
  • 5,610
  • 4
  • 31
  • 59
  • 1
    This script shows an alert-box. But I want, that the browser itself shows, that the page is loading. – Olli Nov 13 '12 at 09:34
  • you formulated our question a bit wrong, then. You want to know how you can update the favicon to simulate the "loading" status while doing ajax requests, if I understood it correctly. – ChuckE Nov 13 '12 at 09:43
  • https://gist.github.com/428626 This might help you. Now you just need to know where the "loading" icon is stored, which can be different from browser to browser. So, you either get one to work everywhere in your case, or you'll find the location by browser and "sniff" the browser before update. – ChuckE Nov 13 '12 at 09:48
  • Yes, but I don't know, if it realy being a "simulation". It's not just about the favicon, the abort-button is active, too. – Olli Nov 13 '12 at 09:49
  • Hum... As far as I know, the browser can't operate on the AJAX requests being triggered, only on "plain" HTTP requests. That means the browser cannot have influence on AJAX requests, unless it starts a new HTTP request, therefore blocking currently running AJAX requests. But maybe someone else knows better and answers it properly. – ChuckE Nov 13 '12 at 12:45
-2

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

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • This script shows an alert-box. But I want, that the browser itself shows, that the page is loading. – Olli Nov 13 '12 at 09:16
  • please explain what you mean by `browser itself shows, that the page is loading`. Also is nott an alert box...can be any html placed anythwhere on page that you want and you can animate it in any way that you want – charlietfl Nov 13 '12 at 09:21
  • Oh, sorry, this comment refers to the other answers - not to yours. I tested your script, but the "spinning wheel" in firefox not appears. I edited my question with further explanation. – Olli Nov 13 '12 at 09:33
  • Do you mean the spinner on tab of browser as in my last statement in answer? Also... you do know how to find your own animated loading GIF don't you? – charlietfl Nov 13 '12 at 09:45
  • Yes. But how about the abort-button in Firefox? Open a picture in facebook triggers the spinning-wheel in the tab and the abort-button. – Olli Nov 13 '12 at 09:53
  • is it not also loading a new url? The spinner on tab activates when a page is loading – charlietfl Nov 13 '12 at 10:03