Wednesday, September 6th, 2006
JavaScript Throbber
Category: JavaScript, UI
JAVASCRIPT:
-
-
document.showThrobber = function()
-
{
-
if ($('throbber'))
-
{
-
$('throbber').innerHTML = '<span id="ajaxThrobber"><img ' +
-
'src="http://sandbox.sourcelabs.com/staticimages/indicator.black.gif"/>' +
-
'</span><iframe style="display:none;" src="/mfm/?throb=throb"></iframe>';
-
}
-
};
-
-
document.hideThrobber = function()
-
-
{
-
if ($('throbber'))
-
{
-
$('throbber').innerHTML = '';
-
}
-
-
};
-
CSS:
-
-
#ajaxThrobber
-
{
-
position:fixed;
-
_position:absolute; /* ie hack */
-
right:10px;
-
top:10px;
-
background:#111;
-
color:white;
-
font-size:9pt;
-
padding:5px;
-
display:block;
-
}
-
PHP
PHP:
-
-
for ($i = 0; $i <120; $i++) {
-
}
-
}
-
Related Content:
3 rating from 78 votes
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?
Can you say overkill? Why the ef would I want to use iframes and php scripts for a throbber?
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.
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?
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.
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.
[...] 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. [...]
This doesn’t work in IE at all. The links don’t even show up.
That’s simple? uh… Here’s a simpler one:
And after your request is complete,
document.getElementById(‘throbber’).style.visibility = ‘hidden’
oops, my angle brackets hid the simple throbber in prior post, will try again with square brackets,
[img id='throbber' src='throbber.gif']
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.
I will jump on the flame-wagon. I
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”
this is an awful bad and wasteful idea
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.