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

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

Answer 1

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

例：

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

Answer 2

 $("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 3

$("*").css("cursor", "progress")无论您当前指向的页面在何处都可以使用。 这样您就不必移动光标就可以看到它被激活了。

Answer 4

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

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

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

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

Answer 5

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

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

当你想要保持原样之前：

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

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

 body.cursorProgress { cursor: progress; } 

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

 body.cursorProgress { cursor: progress !important; } 

Answer 6

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

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

Answer 7

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

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

        
 
  Toggle Wait 
 
  

Answer 8

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