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);
});
}
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.