Monday, July 9th, 2007

Protoload: Ajax Loading

Category: JavaScript, Library

Andreas Kalsch has written a simple library, Protoload, that handles the Ajax loading events that are common place as a way to show users that something is happening on the server, in a particular location:


E.g. a faw XHR example:


  1. var R = new XMLHttpRequest();
  2. R.onreadystatechange = function() {
  3.   if (R.readyState == 4) {
  4.     // Do something with R.responseXML/Text ...
  5.     $('thirdBox').stopWaiting();
  6.   }
  7. };
  8., uri, true);
  9. $('thirdBox').startWaiting();
  10. R.send(method == 'GET' ? null : query);

Posted by Dion Almaer at 8:01 am

3.9 rating from 82 votes


Comments feed TrackBack URI

That’s really neat. I particularly like the loading indicator on form buttons, disabling the button to prevent successive form submissions – handy for final stage checkout buttons.

Comment by Ben — July 10, 2007

I particularly like the way that he left an easy-to-use API for people who don’t happen to use Prototype. Very neat.

Comment by mdmadph — July 10, 2007

This is very useful for those complicated webapps or when there is little space on the screen such as a phone. Practical and Nice.

Comment by Alex — July 10, 2007

An even better API would have been:

$(‘foo’).waitFor(‘/some/url’, { param1: ‘foo’, param2: ‘bar’ }, function() {
// here is your callback.

And viola! One liner. No fiddling around with startWaiting and stopWaiting.

Comment by Charlie Hubbard — July 10, 2007

If the document body is short and the body has a background then the bigWaiting example only covers the document body part which isn’t so attractive. Any solutions?

IE select elements will show through the overlay and so will scroll bars on Mac/Firefox. These have very difficult/painful solutions of hiding these problem elements when there is an overlay. I did this once. It isn’t fun.

Comment by Peter Michaux — July 10, 2007

Thank you for your feedback.

@Charlie: This API is too simple, because for my Ajax ops I use my own or the prototype methods. What you propose looks nice but probably I don’t want to add a Protoload element to every request.

@Peter: I know the problem. The only solution to cover the whole pageview is to use JavaScript to set the height of the element. I haven’t still found a solution for your second problem. Possible: Set style.visibility to ‘hidden’ for all select elements. Anyone who has got time to include that into Protoload?


Comment by Andi — July 11, 2007

Great job : makes it very easy to obtain this sexy web2.0 look.
However to make it work (on Firefox), I had to use Prototype’s Position.cumulativeOffset() instead of element.width() and element.height() methods that only work in simple layouts.

Comment by Philippe — July 11, 2007

Oops : […] Position.cumulativeOffset() and Element.getWidth() and getHeight() instead of, left(), width() and height() […]

Comment by Philippe — July 11, 2007

I’m a little slow. Is there a simple way to implement this on a basic web form Submit button? Our forms take a few seconds to submit. I’ve tried, but I can’t seem to get it working.

Comment by Derrick — July 11, 2007

Is there a complete example for us that are not so good at
prototype and javascript. Tried pasting the example in a
test page and I get nothing at all.


Comment by David Allen — July 13, 2007

yeah a complete example with where to put it in relation to html and everything for beginners would be really nice.

Failing that I could really use some advise on how to get to grips with all this ajax stuff. Do I have to become a java script whizz first?

Comment by jimmyjj — October 2, 2008

link is broken

Comment by randomrandom — September 25, 2009

Leave a comment

You must be logged in to post a comment.