Question

我想向用户显示结果正在加载的状态。使用$ MyDiv.load（“page.php”）在div中加载结果时如何更改光标或gif？

Answer 1

$("body").css("cursor", "progress");

请记住以后再归还：

$MyDiv.load("page.php", function () {
    // this is the callback function, called after the load is finished.
    $("body").css("cursor", "auto");
});

Answer 2

无论您当前指向的页面位于何处，

$("*").css("cursor", "progress")都将有效。这样您就不必移动光标就可以看到它被激活了。

Answer 3

我认为最好是在css文件中设置

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

并在正文中添加/删除类等待

此方法会覆盖输入，链接等中的所有游标。

Answer 4

最初将加载图像设置为不可见。
开始加载时将样式更改为可见。
使用load（）回调参数加载完成后，将样式更改为不可见。

示例：

 $("#loadImage").show();
 $("#MyDiv").load("page.php", {limit: 25}, function(){
   $("#loadImage").hide();
 });

Answer 5

我真的认为在body元素中使用类是一个更好的解决方案

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

当你想要保持原样时：

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

并在你的css文件中添加类似的内容：

body.cursorProgress {
  cursor: progress;
}

因此，使用此解决方案，您不会覆盖对光标样式所做的默认值或更改，第二个优点是您可以在CSS中添加重要内容。

body.cursorProgress {
  cursor: progress !important;
}

Answer 6

例如，如果要在缩略图上悬停显示较大的图像

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

Answer 7

更简洁的JQuery方法虽然不一定有效，但是为所有对象添加和删除繁忙的类。

请注意，并非所有浏览器（例如Firefox）都假设最外层可视对象的高度为100％，因此繁忙的光标只会显示在屏幕的一部分

<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>

Answer 8

看看我的解决方案，它涵盖了所有元素，而不仅仅是body标签： https://stackoverflow.com/a/26183551/1895428

在div中加载html时jquery等待光标

8 个答案: