jquery等待光標加載HTML中的div

7

最初樣式加載圖像不可見。
將開始加載時將樣式更改爲可見。
使用load（）的回調參數加載完成時，將樣式更改爲不可見。

例子：

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

來源

2009-02-18 14:59:06

62

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

只記得事後返回它：

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

來源

2009-02-18 14:58:12 Magnar

+3

這並不在我的網站，但$（「*」）工作的CSS（「光標」，「進度」）做了 – Bryan 2011-09-30 03:11:47

+9

嗯...這種方法有一個不好的副作用...設置$（'*'）。css（'遊標'，'自動'）擦除您可能在頁面上的項目上設置的任何特殊遊標。不好！ – ekkis 2011-11-15 00:30:01

+1

@ekkis你知道一個替代方案嗎？ – k0pernikus 2012-11-02 15:22:22

12

$("*").css("cursor", "progress")將工作無論在網頁上你正在指點。這樣你就不必移動光標看它被激活。

來源

2010-06-04 18:08:49 mountain

9

我認爲最好是建立在CSS文件

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

，並添加/刪除類等待身體

此方法將覆蓋所有遊標的投入，鏈接等

來源

2010-10-03 22:42:44 Marmot

0

對於例如，如果要在縮略圖上懸停時顯示較大圖像

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

來源

2011-07-08 03:31:06

0

A cle aner 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>

來源

2012-08-03 11:42:18 pixelda

4

我真的覺得部分這是一個更好的解決方案，只需使用一類在體內元素

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

而當你想保留它，因爲它以前只是：

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

，並在你的CSS文件把類似的東西：

body.cursorProgress { 
    cursor: progress; 
}

所以用這個解決方案，您不重寫你就光標樣式默認設置或更改，而第二個好處是，你必須添加的可能性在你的CSS重要。

body.cursorProgress { 
    cursor: progress !important; 
}

來源

2015-02-17 13:29:58 robertovg

0

看一看我的解決方案，它涵蓋了所有元素，不僅身體標記： https://stackoverflow.com/a/26183551/1895428

來源

2016-06-23 17:41:09 pmrotule

jquery等待光標加載HTML中的div

回答

相關問題