jquery顯示微調處理時

當'.btn-save'被點擊時，服務器端腳本（可能是php）將連接到服務器上傳圖像或表單數據到服務器。當這個過程發生時，我想讓一個微調器顯示。jquery顯示微調處理時

我對微調HTML是：

<div class="spinner"> 
    <img src="img/loader.gif" alt="Processing" /> 
</div>

我的CSS：

.spinner { 
    z-index: 9999; 
    position: fixed; 
    background: rgba(0, 0, 0, 0.1); 
    width: 100%; 
    height: 100%; 
    top: 0; left: 0; right: 0; bottom: 0; 
    display: none; 
} 
.spinner img { 
    position: fixed; 
    left: 50%; 
    top: 50%; 
    z-index: 10000; 
}

我發現，建議做這樣一個答案：

 $body = $("body"); 

     $(document).on({ 
      ajaxStart: function() { $body.addClass("loading"); }, 
      ajaxStop: function() { $body.removeClass("loading"); }  
     });

的CSS：

body.loading { 
    overflow: hidden; 
} 

body.loading .spinner { 
    display: block; 
}

我想知道這是否適用於我，或者您可以在我的情況下提出不同的建議。

來源

2015-09-05 Alex Zahir

我做過類似的事情，

<form id="feedback"> 
<div class="spinner" id="loader_login" style="display: none;"> 
<input type="submit" value="submit" >

在點擊按鈕後，你的jQuery，

$('#feedback').submit(function (event) { 
     $("#loader_login").css("display", "block"); 

     //data process 

     $("#loader_login").css("display", "none"); 
}

來源

2015-09-05 13:23:02

將數據提交後顯示的微調停止/上傳？另外，我不能做一些更一般的像「$（'form'）。submit（function（event）{...」，而不是單獨指定每個表單嗎？ –

我編輯的代碼它會工作。 –

在你的情況下，ajaxStart和ajaxStop功能不已瞭解變量$身體，因爲它是在他們之外定義。

您需要在ajaxStart函數中使用$("body").addClass("loading")，對於removeClass也需要使用$("body").addClass("loading")。

來源

2015-09-05 13:41:18

使用時可以簡單地使用這一個Ajax：

$.ajax({ 
    url:'/sample/url', 
    type:'POST', 
    //it will fired when the data is currently processing 
    beforeSend: function(){ 

    $('body').addClass("loading"); 
    }, 
    success: function(){ 
    $('body').removeClass("loading"); 
    }, 
    error: function(){ 
    } 
});

來源

2015-09-05 15:27:22 Grald

有趣..是有一種方法可以測試這個？ –

jquery顯示微調處理時

回答

相關問題