隱藏Spinner加載

後，我想在頁面加載我這個嘗試後隱藏微調：隱藏Spinner加載

$(document).ready(function() { 
$('.loader') 
    .hide() // Hide it initially 
    .ajaxStart(function() { 
     $(this).show(); 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); 
    }); 

});

我有這個div：

<style> 
.loader { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    background: url("{{ asset('img/loading.gif') }}") 50% 50% no-repeat rgb(249,249,249); 

} 
</style> 
    <div class="loader"></div>

但沒有結果。

來源

2016-11-09 Martin antonsson

嗨馬丁。你能解釋ajaxStart和ajaxStop功能嗎？這段代碼是否與特定的庫或插件相關，或者您是否打算編寫這些代碼？ –

從jQuery 1.9開始，jQuery全局Ajax事件的所有處理程序（包括使用'.ajaxStart（）'方法添加的處理程序）必須附加到'document' - [** Docs **]（https：// api .jquery.com/ajaxStart /） –

您可以通過使用.ajaxSend()和.ajaxComplete()Ajax Event Handlers

.ajaxSend實現這一目標（）：每當一個Ajax請求即將發送，jQuery的觸發事件ajaxSend。任何和所有已使用.ajaxSend()方法註冊的處理程序都會在此時執行。
.ajaxComplete（）：只要Ajax請求完成，jQuery就會觸發ajaxComplete事件。任何和所有已在.ajaxComplete()方法中註冊的處理程序都會在此時執行。

我使用下面的代碼來顯示一個加載器，當ajax請求被做出，然後在ajax請求完成後隱藏它。

下面是代碼：

var ajax_req_no = 0; 
(function ($) { 
$(document).ajaxSend(function() { 
     ajax_req_no = (ajax_req_no < 0) ? 0 : ajax_req_no; 
     ajax_req_no++; 
     if ($('.loader').length) { 
      $('.loader').show(); 
     } 
    }); 

    $(document).ajaxComplete(function() { 
     ajax_req_no--; 
     ajax_req_no = (ajax_req_no < 0) ? 0 : ajax_req_no; 
     if ($('.loader').length && ajax_req_no == 0) { 
      $('.loader').fadeOut(); 
     } 
    }); 
})(jQuery);

正如可存在AJAX請求的嵌套所以ajax_req_no是計數的請求的數目如果計數爲一個以上的裝填器將顯示否則裝填器將被隱藏。

注意：從jQuery版本1.8開始，此方法只應附加到document。

參考：

來源

2016-11-09 17:54:44

請添加一些關於此代碼爲何幫助OP的解釋。這將有助於提供未來觀衆可以從中學習的答案。有關更多信息，請參閱[答案]。 –

你能只是把.show()代碼Ajax調用，然後在.success()或.done()一個.hide()沿線的前面...

$("#buttonStartingAjax").click(function(){ 
    $(".loader").show(); 
    $.ajax({...}).done(function(){ 
     $(".loader").hide(); 
     ... 
    }); 
)};

來源

2016-11-09 18:03:53 gordon

在我看來，你要找的是這樣的：

$(document).ready(function() { 
 
    $(document) 
 
    .ajaxStart(function() { 
 
     console.log('some AJAX request has started'); 
 
     $(".loader").show(); 
 
    }) 
 
    .ajaxStop(function() { 
 
     console.log('all AJAX requests have completed'); 
 
     $(".loader").hide(); 
 
    }) 
 
    ; 
 

 
    $("#btn").click(function() { 
 
    // trigger some AJAX call 
 
    $.get('example.com'); 
 
    }); 
 
});

.loader { 
 
    position: fixed; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    /*z-index: 9999;*/ /* to see demo's console.log */ 
 
    background: url("img/loading.gif") 50% 50% no-repeat yellow; 
 
    display: none; /* unless overriden by jQuery */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="loader"></div> 
 

 
<button id="btn">Trigger an AJAX request</button>

來源

2016-11-10 00:55:22 arhak

隱藏Spinner加載

回答

相關問題