[jQuery] AJAX Callbacks - How to show Ajax request status using a loading image?

[Shannon]

Hi everyone,

I am a newbie in jquery and have been stuck on this all morning. I am
using the following function to perform an AJAX request which loads in
the specified DIV:

function showUser(str)
{
  $('#content1').load("select.php?q="+str);
}

This works fine but I tried to add a loading gif (you know those nice
circles) and I got it kind of working. The gif would show up and go
away when the content was loaded but I had two problems. The image
would show up on first load and just sit there until the user clicked
a link for the AJAX request and the second error was the image would
appear above the paragraph and not make the content go away until the
new request was completed.

Can someone show a simple call to include the loading image so it's
only displayed while the content is being fetched?

I tried this with no success:

$().ajaxSend(function(r,s){
        $("#content1").load("Loading data, please wait...");
   });

Thanks.