<p>In <b>Prototype</b> I can show a "loading..." image with this code:</p>

<pre><code>var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, 
onLoading: showLoad, onComplete: showResponse} );

function showLoad () {
    ...
}
</code></pre>

<p>In <b>jQuery</b>, I can load a server page into an element with this:</p>

<pre><code>$('#message').load('index.php?pg=ajaxFlashcard');
</code></pre>

<p>but how do I attach a loading spinner to this command as I did in Prototype?</p>

There are a couple of ways. My preferred way is to attach a function to the ajaxStart/Stop events on the element itself.
```
```
$('#loadingDiv')
    .hide()  // Hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;
```
```
The ajaxStart/Stop functions will fire whenever you do any Ajax calls.
Update
: As of jQuery 1.8, the documentation states that
```
.ajaxStart/Stop
```
should only be attached to
```
document
```
. This would transform the above snippet to:
```
```
var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });
```
```