I want to show to the user a state that the result is loading. How can I change cursor or gif while loading result in div with $MyDiv.load("page.php") ?
+10
A:
$("body").css("cursor", "progress");
Just remember to return it afterwards:
$MyDiv.load("page.php", function () {
// this is the callback function, called after the load is finished.
$("body").css("cursor", "auto");
});
Magnar
2009-02-18 14:58:12
+2
A:
- Initially style the loading image non-visible.
- Change the style to visible when you begin loading.
- Change the style to non-visible when loading finished using a callback argument to load().
Example:
$("#loadImage").show();
$("#MyDiv").load("page.php", {limit: 25}, function(){
$("#loadImage").hide();
});
Craig Stuntz
2009-02-18 14:59:06
To actually create the loading gif, check out http://www.ajaxload.info/ where you can customize one and save it.
Darwyn
2009-07-26 23:30:09
A:
Anyone using the $("body").css("cursor", "progress") technique experiencing that you have to move the cursor after the callback to make it change back to default/auto ? IE and Chrome seem to have this problem, but FF handles it great.
Bobmoff
2010-02-04 10:06:58
@Magnar - I does not seem to matter if I set it back using javascript directly on the body element or switching a class on it, it still only reacts when I move the mouse. Could you show me an example of this working in IE and Chrome I would be very happy!
Bobmoff
2010-10-24 16:05:49
+3
A:
$("*").css("cursor", "progress") will work no matter where on the page you are currently pointing. This way you do not have to move the cursor to see it activated.
mountain
2010-06-04 18:08:49
A:
I think the best is to set up in css file
body.wait * {
cursor:wait !important;
}
and add/remove class wait in body
this method overrides all cursors in inputs, links etc.
Marmot
2010-10-03 22:42:44