代码之家 › 专栏 › 技术社区 › Bigballs

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

dom html jquery javascript

Bigballs · 技术社区 · 17 年前

在使用$MyDiv.load(“page.php”)将结果加载到div中时,如何更改光标或gif?

8 回复 | 直到 17 年前

Magnar 17 年前

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

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

Andreas Köberle 14 年前

$("*").css("cursor", "progress")

elCamion Marmot 14 年前

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

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

并在主体中添加/删除类wait

Craig Stuntz 17 年前

最初,加载图像的样式不可见。
开始加载时,将样式更改为可见。
加载完成后,使用要加载()的回调参数将样式更改为不可见。

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

robertovg 11 年前

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

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

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

在css文件中放入如下内容:

body.cursorProgress {
  cursor: progress;
}

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

body.cursorProgress {
  cursor: progress !important;
}

Null Head 15 年前

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

pixelda 13 年前

一种更干净的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>

Community Mohan Dere 9 年前

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