javascript - History Api: How to tell the browser, that the page is loading? - Stack Overflow

admin管理员组

文章数量:1346198

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

Share Improve this question Follow edited Nov 26, 2015 at 14:11 pnuts 59.5k1111 gold badges9191 silver badges141141 bronze badges asked Nov 13, 2012 at 8:36 OlliOlli 42155 silver badges1616 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

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

本文标签： javascriptHistory Api How to tell the browserthat the page is loadingStack Overflow