blocks|key|1623747|text|$("body").css("cursor",+"progress");|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1623748|只需记住事后将其返回：|unstyled|1623749|$MyDiv.load("page.php",+function+()+{
++++//+this+is+the+callback+function,+called+after+the+load+is+finished.
++++$("body").css("cursor",+"auto");
});+|1623750|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>$("body").css("cursor", "progress");
</code></pre>

<p>Just remember to return it afterwards:</p>

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


blocks|key|1409114|text|无论您当前指向页面上的哪个位置，$("*").css("cursor",+"progress")都将正常工作。这样，您不必移动光标即可看到它处于激活状态。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1409115|entityMap^0|G|W|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p><code>$("*").css("cursor", "progress")</code>  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.</p>


blocks|key|1623820|text|我认为最好的方法是在css文件中设置|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1623821|body.wait+*,+body.wait+{
cursor:wait+!important;
}|code-block|syntax|javascript|1623822|并在主体中添加/删除类等待|1623823|此方法覆盖输入、链接等中的所有游标。|1623824|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I think the best is to set up in css file</p>

<pre><code>body.wait *, body.wait {
cursor:wait !important;
}
</code></pre>

<p>and add/remove class wait in body</p>

<p>this method overrides all cursors in inputs, links etc.</p>


blocks|key|1623980|text|我真的认为在body元素中使用类是更好的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1623981|++$('body').addClass('cursorProgress');|code-block|syntax|javascript|1623982|当你想保持它以前的样子时，只要：|1623983|++$('body').removeClass('cursorProgress');|1623984|在你的css文件中放入类似这样的内容：|1623985|body.cursorProgress+{
++cursor:+progress;
}|1623986|因此，使用此解决方案，您不会覆盖在光标样式上所做的默认值或更改，第二个优点是您可以在css中添加重要的内容。|1623987|body.cursorProgress+{
++cursor:+progress+!important;
}|1623988|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

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

<pre><code>  $('body').addClass('cursorProgress');
</code></pre>

<p>And when you want to keep it as it was before just:</p>

<pre><code>  $('body').removeClass('cursorProgress');
</code></pre>

<p>and in you css file put something like that:</p>

<pre><code>body.cursorProgress {
  cursor: progress;
}
</code></pre>

<p>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.</p>

<pre><code>body.cursorProgress {
  cursor: progress !important;
}
</code></pre>


blocks|key|1623862|text|例如，如果您希望在悬停在缩略图上时显示较大的图像|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1623863|//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");
++++++++++++});
++++}|code-block|syntax|javascript|1623864|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>For example, if you want to show larger image on hovering on a thumbnail    </p>

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


blocks|key|1623907|text|一种更简洁的JQuery方法是向所有对象添加和删除忙碌的类，尽管这并不一定有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1623908|请注意，并非所有浏览器(例如Firefox)都假定最外层的可视对象的高度为100%25，因此忙碌的光标只会显示在屏幕的一部分|1623909|<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>|code-block|syntax|javascript|1623910|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

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

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

        $(function () {

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

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

        //]]&gt;
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;form id="form1" runat="server"&gt;
    &lt;div&gt;
        &lt;button id="btnToggleWait"&gt;
            Toggle Wait&lt;/button&gt;
    &lt;/div&gt;
    &lt;/form&gt;
&lt;/body&gt;
</code></pre>


blocks|key|1624037|text|看看我的解决方案，它涵盖了所有元素，而不仅仅是主体标记：https://stackoverflow.com/a/26183551/1895428|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1624038|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/26183551/1895428^0|S|18|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>Have a look at my solution, it covers all elements, not only the body tag:
<a href="https://stackoverflow.com/a/26183551/1895428">https://stackoverflow.com/a/26183551/1895428</a></p>


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


jquery wait cursor while loading html in div

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

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

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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