Wednesday, September 6th, 2006

JavaScript Throbber

Category: JavaScript, UI

Alex Bosworth has written the simplest of throbbers:

javascript

  1. document.showThrobber = function()
  2. {
  3.     if ($('throbber'))
  4.     {
  5.         $('throbber').innerHTML = '<span id="ajaxThrobber"><img ' +
  6.                                     'src="http://sandbox.sourcelabs.com/staticimages/indicator.black.gif"/>' +
  7.                                   '</span><iframe style="display:none;" src="/mfm/?throb=throb"></iframe>';
  8.     }
  9. };
  10.    
  11. document.hideThrobber = function()
  12.  
  13. {
  14.     if ($('throbber'))
  15.     {
  16.         $('throbber').innerHTML = '';
  17.     }
  18.  
  19. };

CSS

  1. #ajaxThrobber
  2. {
  3.   position:fixed;
  4.   _position:absolute; /* ie hack */
  5.   right:10px;
  6.   top:10px;
  7.   background:#111;
  8.   color:white;
  9.   font-size:9pt;
  10.   padding:5px;
  11.   display:block;
  12. }

PHP

if (isset($_GET[‘throb’])) {
for ($i = 0; $i < 120; $i++) { if (!connection_aborted()) sleep(1); } die(); } [/php]

Posted by Dion Almaer at 9:38 am
15 Comments

+++--
3 rating from 83 votes

15 Comments »

Comments feed TrackBack URI

Seems solid, but I seriously wonder why they used _position here.
All that was needed (to follow standards) was:

position: fixed !important;
position: absolute;

Or am I missing something here?

Comment by Rogier — September 6, 2006

Can you say overkill? Why the ef would I want to use iframes and php scripts for a throbber?

Comment by supper — September 6, 2006

So, what’s it actually doing – no explanation of what the code is about, no breakdown of what the iframe is for, what is the purpose of “/mfm/?throb=throb” , how the connection_aborted() function returns, etc.

Basically of no interest to a new user of Javascript.

Why not simply show a Div when starting an Ajax call and hide it again when the call completes! I personally use a reference count ‘Throbber’ indicator that tells me how many Ajax calls are currently being done, and keeps track of them – killing off the appropriate completed ones.

Comment by Dave Probert — September 6, 2006

Oh, that’s horrible… basically, that ties up a connection to the webserver and does nothing. Normally people use throbbers when a certain request can take more than a couple seconds. Tieing up an *extra* webserver connection that does nothing while you have one connection doing something should successfully send your server’s load average through the roof. Can you imagine if you got slashdotted while running one of these?

Comment by Matt Nuzum — September 6, 2006

Am I missing something here? In firefox all this seems to do is display an animated spinner gif, it doesn’t actually activate the browser’s ‘throbber’ in the top right corner.

Using IE I get no ‘throbber’ at all, just a couple of javascript errors.

Comment by Mike — September 6, 2006

Still in testing, but it works for me.

If you are judicious in your use of the throbber I don’t think the webserver connection is a huge concern, at most it should only increase load by 2x. For example, since edits are quite an uncommon operation, I only use the ajax throbber on those.

You can use whatever CSS you’d like, but I don’t like to use !important in case someone is using a user stylesheet.

Comment by Alex Bosworth — September 6, 2006

[…] Oh, look. Ajaxian posted code for a throbber. Basically you tie up a web service connection to provide an animation signifying that you have an open web server connection. […]

Pingback by The Bb Gun » Blog Archive » Me Feed Eleven — September 6, 2006

This doesn’t work in IE at all. The links don’t even show up.

Comment by David O — September 6, 2006

That’s simple? uh… Here’s a simpler one:

And after your request is complete,

document.getElementById(‘throbber’).style.visibility = ‘hidden’

Comment by jt — September 6, 2006

oops, my angle brackets hid the simple throbber in prior post, will try again with square brackets,

[img id=’throbber’ src=’throbber.gif’]

Comment by jt — September 6, 2006

works over here (firefox os x) I don’t understand why all of the commentors are so confused. When the throbber is activated an iFrame is added to the page which opens a connection to a php page which basically sleeps for 2 minutes or until the page is closed, this causes your browser’s throbber to be activated. Apparently they also add a throbber .gif to the page for good measure.

Personally I think this is kind of overkill for 90% of applications, perhaps the best use of this method of ‘throbbering’ would be for sensitive ajax requests that take a long time (not to exceed 2 minutes, however) on sites where users generating these requests tend to be absent minded…

If you wanted to use this in a way that doesn’t cause you extra server load you could perhaps write a script that will append and destroy an iFrame pointing to a large site like yahoo every second or so.

Comment by Jeff — September 6, 2006

I will jump on the flame-wagon. I

Comment by Mario — September 6, 2006

the comments dont except tag brackets for example in creating the ascii i *heart& something…. what I was going to say is , “I *heart* the js error i get on the page”

Comment by Mario — September 6, 2006

this is an awful bad and wasteful idea

Comment by poni — September 8, 2006

Seems like some people are missing the point about the iframe and script. The intent is to hide/show the browser’s built-in throbber.

Comment by scott — November 16, 2006

Leave a comment

You must be logged in to post a comment.