42

I'm making an ajax-enabled lab scheduling program, and some of the ajax operations aren't exactly quick.

In Gmail, when you go to your inbox, send a message, etc. the browser acts like it's loading (In FF the stop button becomes enabled, the progress bar appears), but it's not on a new page, it's done via AJAX.

How do they do this? I have a little spinny indicator, but it would be a nice touch to have the browser act like it's loading. Any ideas?

totallyNotLizards
  • 8,489
  • 9
  • 51
  • 85
Michele N.
  • 421
  • 1
  • 4
  • 3
  • what is your question? are you trying to add a "loading" image to a webpage? – Jason Dec 16 '09 at 22:25
  • 8
    No, I'm trying to have the browser's 'loading' triggered. (When you load a page, a progress bar appears, etc.) – Michele N. Dec 16 '09 at 22:26
  • The only thing I can think of since I know no standard API for trigger browser's indicator would be to fire the XHR request, then add a `iframe` element to the page, load a "ping" page in it (a page that won't respond until the XHR is finished, meaning it probably requires a server-side lock like sessions), and put event handlers on that `iframe` to deal with the browser's loading cancellation. And don't forget to fix the history once the `iframe` finished to load – Xenos May 05 '17 at 08:40
  • Why not try to reverse engineer what gmail does? So in Chrome, right click on element, select inspect, select body tag, right click on it, select break on subtree modifications. Now refresh the page and look at the time it breaks - it would still show the page as loading. – Zlatin Zlatev Nov 28 '17 at 19:16

5 Answers5

8

I think this is your answer. (Reverse-AJAX or "Slow Load" technique from Obviously.com)

Looks like the GMail and Facebook method (browser is showing page as "loading" with loading icons etc. - it is just simulating, because there is a background ajax request) :)

jkmartindale
  • 523
  • 2
  • 9
  • 22
s3m3n
  • 4,187
  • 1
  • 28
  • 24
  • 2
    I don't get the relationship between this question and the Reverse-AJAX technique you mentioned! – Alireza Mirian Aug 14 '14 at 03:46
  • 1
    The idea with this answer is to create an iframe on the page, with the iframe src pointing to a page that loads forever. That will cause the browser's loading indicators to appear, for as long as that iframe is trying to load. – Doug S Nov 07 '15 at 09:11
5

I found a related answer here: Browser continues 'loading' after ajax request finishes.

You can create an iframe and open and close its contentDocument which seems to start and stop the browser's native loading animation. See an example here: http://jsfiddle.net/KSXkS/1/.

Community
  • 1
  • 1
cburgmer
  • 2,150
  • 1
  • 24
  • 18
4

Many users don't even understand or notice the browser's native loading indicators. If it is really a long running load the best user experience would be to indicate it as part of your web application. Remember context is king and this is an opportunity to communicate to your user what is going on and what functionality is still available.

If your entire user interface becomes invalid at the time of the request an overlay with a loading indicator is appropriate. A slightly opaque overlay communicates to the user without a disruptive break in vision.

If you simply need to show the request has started and is working, a spinner next to the button that started the request is best. On success, the spinner can be replaced with a green check mark or other common indicator that fades out after a short period.

These are common patterns found in many of google's applications.

N-ate
  • 6,051
  • 2
  • 40
  • 48
  • 2
    I appreciate the answer but I've good reasons why I want to use the browser indication instead of a custom one. – brillout Nov 28 '17 at 09:12
  • 1
    Yeah, from an UI perspective this makes much more sense. Using the browser buttons would make sense if this was actually a way to cancel the request, or at list to tell your page to cancel it. That I'd be very interested in! – Stefan Balan Nov 29 '17 at 08:29
  • "many users don't even understand or notice the browser's native loading indicators." This first statement is definitely wrong. There should totally be a native API for this. The right UX would be to trigger the browser's loading indicator as requested by OP. – adriendenat Nov 18 '19 at 16:34
  • That's definitely a nice thought @adriendenat. Let us know when there is an API available cross-browser. – N-ate Dec 10 '19 at 16:22
-1

I believe you want something like this.

I have added an API to pull geo location of github.com (not related, but I think it serves the purpose of sample API).

It's simple JavaScript and JQuery code to show/hide the loading indicator while making the AJAX request.

$('#btn').click(function() {
  $('#overlay').show();
  $.ajax('https://freegeoip.net/json/github.com').then(function(response) {
    $('#overlay').hide();
    $('#country').html(response.country_name);
  });
});
body {
  padding: 0;
  margin: 0;
}

#overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  top: 0;
  background-color: rgba(255, 255, 255, 0.7);
}

.plus {
  display: flex;
  margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay" style="display:none">
  <div class="plus">
    <img src="https://loading.io/assets/img/landing/curved-bars.svg" alt="loading"/>
  </div>
</div>

<div>
  <button id="btn">Perform AJAX Operation</button>
  <div>
  Country: <span id="country"></span>
  </div>
</div>
Vipin Kumar
  • 6,441
  • 1
  • 19
  • 25
-1

The probable solution is to use iframe to trigger the loading. But based on previous answer, iframe method cannot work on chrome.

Your need is to show the loading icon on browser, so I think another way is to create fake loading icon.

You can update the browser icon manually. There are some tutorials about how to update browser icon.

And then, try to make icon animate. Most of browser doesn't support gif icon, so what you need to do is update icon in every few seconds.

This is demo code:

 var favicon_images = [];
 for (var i = 1; i <= 12; i++)
   favicon_images.push('./icon/' + i + '.png');

 var image_counter = 0;

 setInterval(function() {
     var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
     link.type = 'image/x-icon';
     link.rel = 'shortcut icon';
     link.href = favicon_images[image_counter];
     document.getElementsByTagName('head')[0].appendChild(link);

   if(image_counter == favicon_images.length -1)
         image_counter = 0;
     else
         image_counter++;
 }, 150);

I create a quick demo. Demo

With this demo, you can find that the icon animation doesn't run smoothly. That is because everytime we update the icon, browser request the icon again.

So transform the image to base64 format than it works smoothly.

Base64 demo

Now you just need to find the loading icon is the same with Chrome and other popular browsers, then trigger the fake loading when you call ajax.

Here I paste some change icon tutorial:

Chen-Tai
  • 3,435
  • 3
  • 21
  • 34
  • 1
    Downvoting because it's not what OP asked. But giving you the bounty as your answer is better than the rest. – brillout Nov 30 '17 at 07:45