ajax 調用時改變鼠標指針

Question

我想在運行 AJAX 調用時將鼠標指針更改為“等待”符號，並在完成調用后返回默認指針。 我已嘗試如下，但我的問題是它只是在 Firefox 上工作，直到我不單擊/按下鼠標按鈕。 這是我的代碼：

function initializeAjax(url){
    $('html, body').css("cursor", "wait");

    try {
        if (url.substring(0,4) == ".mdf") {
            var database = window.location.pathname.slice(0,window.location.pathname.lastIndexOf('.mdf'));
            var url = database + url;
        }

        initRequest(url);
        returnedValues = null;
        req.onreadystatechange = returnedValues;
        nocache = Math.random();
        req.open("GET", url+"&nocache = "+nocache, false);
        req.send(null);

        $('html, body').css("cursor", "auto");
        return req.responseText;
    }
    catch(err) {
        return "Error 8";
    }
}

任何人都可以幫助如何更改上面的內容以解決問題，以便它在 Firefox 和 IE 中也能工作。

Answer 1

從jQuery 1.9開始 ，這是如何做到的：

$(document).ajaxStart(function ()
{
    $('body').addClass('wait');

}).ajaxComplete(function () {

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

});

CSS

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

Answer 2

看看jQuery get方法。 它的使用非常簡單並且也可以處理回調，因此添加代碼將鼠標光標設置回來就沒有問題了......

http://api.jquery.com/jQuery.get/

例...

$('html, body').css("cursor", "wait");
$.get("yourajaxcall.url", function(data) {
    $('html, body').css("cursor", "auto");

    //  Success - do something with "data" here

}).error(function() {
    $('html, body').css("cursor", "auto");

    //  There was an error - do something else

});

Answer 3

這篇文章有一個很好的解決方案。

這是他的解決方案：

function globalAjaxCursorChange() 
{
  $("html").bind("ajaxStart", function(){
     $(this).addClass('busy');
  }).bind("ajaxStop", function(){
     $(this).removeClass('busy');
  });
}

然后在CSS中：

html.busy, html.busy * {  
  cursor: wait !important;  
}  

我喜歡CSS方法並切換類而不是實際更改Javascript中的CSS。 對我來說似乎更清潔。

要專門將其應用於您的代碼，您可以將嘗試將光標更改為Javascript的Javascript更改為$(this).addClass('busy'); 然后當你想要改變光標時，只需調用$(this).removeClass('busy');

Answer 4

簡單易用的解決方案，只需將以下代碼添加到您想要受影響的每個頁面：

$(document).ajaxStart(function(){ 
    $("body").addClass('ajaxLoading');
});
$(document).ajaxStop(function(){ 
    $("body").removeClass('ajaxLoading');
});

而CSS：

.ajaxLoading {  
  cursor: progress !important;  
}  

當然，您可以根據需要更改它，但是為了在每個ajax調用上顯示加載光標的簡單有效方法，這是要走的路（或者至少，我會這樣做）。

Answer 5

Stack Overflow上提供的答案都不適用於我。 我正在使用最新最好的FireFox進行開發，其他人在這里使用IE，Chrome等....每次我調用jQuery的AJAX時都不會發生任何事情，只有當AJAX調用回來時 - 光標會改變。 然后它會卡在等待光標中。 所以 - 調用，服務器返回新信息，信息顯示然后WHAM！ 等待光標顯示，不會消失。 我嘗試了所有給出的答案。 正在調用.ajaxXXXX的東西。 （我把一個警告（“HERE”）;放入功能中，“HERE”的所有時間都出現了。每一個電話。非常令人沮喪。

所以我去了“好吧 - 新的東西不起作用。去上學怎么樣？” 我知道這樣做很笨 - 但這不是我正在研究的一些重大計划。 它只是一個小編輯器，所以有幾個人可以同時編輯我們的數據庫。 永遠不會看到互聯網的光芒。 只有內聯網。 :-)無論如何，這工作和工作非常。 您需要提供自己的等待光標。 我只是抓了一個谷歌圖片來使用。

首先 - HTML：

<div id='wait' name='wait'
style='position:absolute;top:-9999px;left:-9999px;background-color:rgba(0,0,0,0.3);'>
<table border='0' cellspacing='0' cellpadding='0' style='width:100%;height:100%;'><tbody>
<tr><td style='width:100%;height:50%;'> </td></tr>
<tr><td align='center'><img id='cursor' name='cursor' src="images/wait.gif"></td></tr>
</tbody></table>
</div>

然后是jQuery：

function waitCursor()
{
    $('#wait').css({
        'top' : '0px',
        'left' : '0px',
        'width' : '100%',
        'height' : '100%'
        });
}

function defCursor()
{
    $('#wait').css({
    'top': '-9999px',
    'left' : '-9999px',
    'width' : '0%',
    'height' : '0%'
    });

和

$(document).ajaxStart(function(){ waitCursor(); })
    .ajaxComplete(function(){ defCursor(); })
    .ajaxStop(function(){ defCursor(); });

老派但也很簡單。 只有一個帶有桌子的DIV。 該表只有行。 第一個是整個屏幕高度的50％。 第二個只是將等待光標居中在屏幕上。 您總是可以使第一個高度達到45％，或者屏幕高度的一半減去圖像高度的一半。 但正如我所說 - 這只是一個簡單的內部計划。 問題是 - 這適用於所有瀏覽器，而不是試圖通過大量的箍來讓它出現。 我在其他主要網站上看到過類似的東西。 所以很明顯其他人已經厭倦了瀏覽器在需要時沒有顯示等待光標和真相 - 我記得看到這一點並且想知道復制有多難。 現在我知道了 - 這根本不難。

玩得開心！

Answer 6

我不喜歡簡單地將css屬性添加到body標簽的解決方案：如果你已經為你的元素分配了一個游標，它就無法工作。

在這里查看我的解決方案： https ： //stackoverflow.com/a/26183551/1895428

Answer 7

  $('html, body').css("cursor", "wait");  

在調用AJAX之前使用此代碼

然后：

  $('html, body').css("cursor", "default");   

在成功功能

例：

  $('html, body').css("cursor", "wait"); 
               $.ajax({
                       url://your url  ,
                       type: //your type post or get 
                       dataType: "html",
                       data: //data send by ajax
                       success: function(returnData){
                       $('html, body').css("cursor", "default");
                                   //any other actions ....
                                   },
                                   error: function(e){
                                     alert(e);
                                   }
                                });      

Answer 8

$（'html，body'）。css（“cursor”，“wait”）; 工作得很好

Answer 9

在您的主要功能中添加以下內容：

$('html, body').css("cursor", "wait");  

然后聲明這個函數（這是ajax結果）：

function returnedValues () {    
  if (xmlhttp.readyState==4) 
  {      
     $('html, body').css("cursor", "auto");   
  }  
} 

並將工作驚人:)