jquery wait cursor while loading html in div

W

8

17

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") ?

Wichman answered 18/2, 2009 at 14:55 Comment(0)

I

7

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

Iggy answered 18/2, 2009 at 14:59 Comment(1)

To actually create the loading gif, check out ajaxload.info where you can customize one and save it. – Tyrant 26/7, 2009 at 23:30

A

63

$("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");
});

Apiculate answered 18/2, 2009 at 14:58 Comment(6)

this did not work on my site but $("*").css("cursor", "progress") did – Hubbell 30/9, 2011 at 3:11

hmm... this approach has a bad side effect... setting $('*').css('cursor', 'auto') wipes away any special cursors you may have set up on items on the page. no good! – Basketball 15/11, 2011 at 0:30

@Basketball Do you know an alternative? – Reinhard 2/11, 2012 at 15:22

@Basketball Nevermind, I solved it by defining a css class loading where I set the cursor. And instead of $fnord.css(...) I use $fnord.toggleClass('loading') – Reinhard 2/11, 2012 at 15:26

This works for me unless I hover over a button. Is there a way with CSS to set !important? – Yirinec 24/4, 2013 at 1:35

when going back to normal i used $("body").css("cursor", ""); – Golly 11/11, 2014 at 21:39

F

12

$("*").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.

Frontwards answered 4/6, 2010 at 18:8 Comment(2)

nice but does not work in Chrome (code.google.com/p/chromium/issues/detail?id=26723) – Brunhilde 4/3, 2011 at 13:11

yikes! that approach is flawed. it wipes out cursor assignments to everything on the page. – Protrusion 18/2, 2012 at 23:12

A

10

I think the best is to set up in css file

body.wait *, body.wait {
cursor:wait !important;
}

and add/remove class wait in body

this method overrides all cursors in inputs, links etc.

Airtight answered 3/10, 2010 at 22:42 Comment(3)

I like the approach but it didn't work on IE 9. mountain's approach of $('*').css('cursor', ...) did though – Basketball 15/11, 2011 at 0:27

yikes! that approach is flawed. it wipes out cursor assignments to everything on the page – Basketball 15/11, 2011 at 0:30

This's actually the best cross-browser solution - tested. after removing wait class, CSS will cascade back to what the cursor was set without defaulting it like other solutions. Thx Marmot. @Basketball you should test it again. it works in IE9. – Barcelona 20/7, 2012 at 9:40

I

7

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

Iggy answered 18/2, 2009 at 14:59 Comment(1)

To actually create the loading gif, check out ajaxload.info where you can customize one and save it. – Tyrant 26/7, 2009 at 23:30

K

4

I really think that it's a better solution to just use a class in the body element

  $('body').addClass('cursorProgress');

And when you want to keep it as it was before just:

  $('body').removeClass('cursorProgress');

and in you css file put something like that:

body.cursorProgress {
  cursor: progress;
}

So with this solution you are not overriding the defaults or changes you make on cursor styles, and the second advantage is that you have the possibility of adding the important in your css.

body.cursorProgress {
  cursor: progress !important;
}

Koosis answered 17/2, 2015 at 13:29 Comment(0)

R

0

For example, if you want to show larger image on hovering on a thumbnail

//Hovered image
    $("a.preview").hover(function(e) {
            var aprev = this;
            //Show progress cursor while loading image
            $(aprev).css("cursor", "progress");
    //#imgpreview is the <div> to be loaded on hover
    $("#imgpreview").load(function() {           
                $(aprev).css("cursor", "default");
            });
    }

Raucous answered 8/7, 2011 at 3:31 Comment(0)

M

0

A cleaner JQuery approach, although not necessarily efficient is to add and remove a busy class to all objects.

Note that, not all browsers (e.g. Firefox) assume a height of 100% for the outermost viewable object, so the busy cursor will only get displayed on the part of the screen

<head runat="server">
    <title></title>
    <style type="text/css">
        .busy
        {
            cursor: wait !important;
        }
    </style>
    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[

        $(function () {

            $("#btnToggleWait").click(function (e) {
                if ($(e.target).hasClass("busy")) {
                    $("*").removeClass("busy");
                }
                else {
                    $("*").addClass("busy");
                }

                e.preventDefault();
                e.stopPropagation();
                return false;
            });
        });

        //]]>
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <button id="btnToggleWait">
            Toggle Wait</button>
    </div>
    </form>
</body>

Metal answered 3/8, 2012 at 11:42 Comment(0)

S

0

Have a look at my solution, it covers all elements, not only the body tag: https://mcmap.net/q/270657/-how-to-change-cursor-to-wait-when-using-jquery-load

Syreetasyria answered 23/6, 2016 at 17:41 Comment(0)

Recommended topics

Hot tags