can you help me add a “throbber” to this ajax function

Question

Basically, on my page an image is called to div#imagebox when the function is executed. But sometimes the image is large and can take awhile to load, especially if it hasn't been loaded into the cache yet. I would like to give the user some notice that the request is being processed. I think I can do this with a throbber. I would like the throbber to be displayed in div#imagebox until the image is ready. Then I would like the throbbber to disappear.

I've looked at this page http://plugins.jquery.com/project/throbber but I don't really understand what I'm supposed to do.

Could i add something like $("div#imagebox").throbberShow(true); into the existing function (see below?) But where would I add it? Do i need the parameter true ?

Thanks for your help.

 function showImage(ms, pid)     
 {
   $.get("../msimages/image.php", {ms: ms, pid: pid}, function(txt)        
    {        
      $("div#imagebox").html(txt);    
    }); 
 }

Answer 1

In your case it looks like you would add it as follows. I don't believe the true parameter is necessary:

function showImage(ms, pid)     
 {
   $.throbberShow({ajax: true, parent: imagebox); // add this line.
   $.get("../msimages/image.php", {ms: ms, pid: pid}, function(txt)        
    {        
      $("div#imagebox").html(txt);    
    }); 
 }

This should load the image into #imagebox, and when the ajax is done loading, it should overwrite whatever is in there.