Question

I work for a large website (5+ million unique hits monthly, approx 55-60 million pages views/impressions).

We are currently updating our usability (tabindex, labels, etc).

I’m using a css class and jQuery (see code below) to change the cursor type to “progress” on form submit (and on ajax related partial page refresh/update, etc) so that the user instantly knows “something” is happening, via the class name “loadWait.

 //css class
   body.wait *, body.wait {
    cursor:progress !important;
   }

   //jQuery
   $(document).ready(function() { 
      $('.loadWait').click(function(){
         progerssCursor();
      });
   });
   function progerssCursor(){
    $('body').addClass('wait');
   }
   function removeProgerssCursor(){
    $('body').removeClass('wait');
   }

   //example html   
   <input type="sumbit" class="loadWait" />
   <a href="..." class="loadWait" />

   //in ajax requests by calling functions "progressCursor()" and 
"removeProgressCursor" at the appropriate time/place

So the questions are:

1. Are there any known “side effects” of this kind of approach? (Have googled extensively and couldn’t find anything which leads me to believe not).

2. We are discussing if we should also attach class=”loadWait” to all of our links (obviously not the ones with target=”_blank” as we don’t want the cursor to change in this situation). What are your thoughts? Our reasoning being that at times, for whatever reason (high server load, slow internet connection, etc), there can be the odd lag of a couple of seconds between user “link clicks” and the actual page starting to render, this way the user would instantly know that “something” is happening (we are aware that the loading icon in the tab is there, but it is often missed by the user).
   What are your thoughts? Is it an over kill doing this for all of our links? (not talking about man hours here).

3. Does anyone know what kind of extra page load time (if any) this will add? (how does $(‘.loadWait’).click(function(){… work? Does jQuery inspect the whole DOM on page load for the “click” event, or on a “click by click” basis checking for a matching class name?).

4. Any other thoughts on any of this?

NOTE: This code has been tested by us on IE6-9, FF3.6, FF11, FF12, Opera, Safari (windows), Chrome, etc with no known/apparent bugs/issues.

Answer 1

I’ll go ahead and answer your questions by #:

1. There are no direct side effects to doing what you are doing. There are some scenarios that you are helpless to though, for instance a user with JavaScript disabled. That being said I know that Chrome (at least the newer versions) will change the cursor to a loading icon automatically on page load so this extra piece of JavaScript will not be necessary for the Chrome browser. However, with a high traffic site running JavaScript should not be the worry (see #2), unless that JS is ajax oriented.
2. If you’re trying to add a custom loading indicator on link clicks then adding a click handler to each link will be the appropriate way. Nice thing about JavaScript is that it’s purely client side. So despite how long it takes a page to load, the second a user clicks a “loadWait” link it will fire the JavaScript first and then wait for the page to load. Therefore based on the server load you’re describing this will have no effect on the action of actually clicking a link since your piece is all client side.
3. As long as your JavaScript is at the bottom of the body (which it should be) the page load time will be unaffected in the sense that all the HTML elements will have already loaded before any JavaScript is executed. However, if you’re truly concerned the click event isn’t a very taxing jQuery function but just like any jQuery function, if used in excess can cause a minimal delay. I doubt this will be an issue however, so I’d say, don’t worry about it, just make sure your JS is at the bottom of the page.
4. Briefly jumping back to #1: make sure you take a look at all the browsers innate functionality so you can determine which browsers (like Chrome) already offer this functionality.

Best of luck to you, hope this helps!

EDIT: One more thing I forgot to mention. If you have any dynammically loading JavaScript on the page the .click event will not register to any links within that dynamic JavaScript. That is assuming that your code snippet is firing in $(document).ready. If you were to move it to $(window).load that would be more appropriate. However, an even better solution is to utilize jQuery’s .on function (used to be .live). The on function will allow for dynamic JavaScript to also be bound, but beware: if there is a lot of dynamic JavaScript on a regular basis this could hinder the performance of that JavaScript.