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

【问题标题】：jquery wait cursor while loading html in divjquery在div中加载html时等待光标
【发布时间】：2010-10-08 08:44:01
【问题描述】：

我想向用户显示结果正在加载的状态。如何在使用 $MyDiv.load("page.php") 将结果加载到 div 时更改光标或 gif？

【问题讨论】：

标签： javascript jquery html dom

【解决方案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");
});

【讨论】：

这在我的网站上不起作用，但 $("*").css("cursor", "progress") 可以
hmm...这种方法有一个不好的副作用...设置 $('*').css('cursor', 'auto') 会擦除您可能设置的任何特殊光标在页面上的项目上。不好！
@ekkis 你知道替代方案吗？
@ekkis 没关系，我通过定义一个 css 类 loading 来解决它，我在其中设置了光标。而不是 $fnord.css(...) 我使用 $fnord.toggleClass('loading')
这对我有用，除非我将鼠标悬停在按钮上。有没有办法用 CSS 来设置 !important？

【解决方案2】：

$("*").css("cursor", "progress") 无论您当前指向页面的哪个位置都可以使用。这样您不必移动光标即可看到它已激活。

【讨论】：

不错，但在 Chrome 中不起作用 (code.google.com/p/chromium/issues/detail?id=26723)
哎呀！这种做法是有缺陷的。它会清除页面上所有内容的光标分配。

【解决方案3】：

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

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

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

此方法覆盖输入、链接等中的所有光标。

【讨论】：

我喜欢这种方法，但它在 IE 9 上不起作用。山的 $('*').css('cursor', ...) 方法虽然有效
哎呀！这种做法是有缺陷的。它消除了页面上所有内容的光标分配
这实际上是最好的跨浏览器解决方案 - 经过测试。删除等待类后，CSS 将级联回光标设置的内容，而不像其他解决方案那样默认设置。谢谢土拨鼠。 @ekkis 你应该再次测试它。它适用于 IE9。

【解决方案4】：

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

例子：

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

【讨论】：

要实际创建加载 gif，请查看ajaxload.info，您可以在其中自定义并保存它。

【解决方案5】：

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

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

当你想保持它原来的样子时：

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

然后在你的 css 文件中放这样的东西：

body.cursorProgress {
  cursor: progress;
}

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

body.cursorProgress {
  cursor: progress !important;
}

【讨论】：

【解决方案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");
            });
    }

【讨论】：

【解决方案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>

【讨论】：

【解决方案8】：

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

【讨论】：