如何使用jquery添加加載圖片？

我想添加一個加載或微調消息，直到表單/服務器完成重新加載如何檢查並知道表單已完成加載禁用微調器？如何使用jquery添加加載圖片？

注意：一旦表單被提交，更新的數據將不可用，直到服務器重新啓動時，只有表單標題可見，而重新啓動和更改已更新。目前我手動刷新頁面，直到表單再次可用。

這裏是我的html和jquery的片段和加載代碼。我的加載代碼不起作用。

代碼加載消息

$(document).ready(function() { 
       $('<div id="loading">Loading...</div>') 
       .insertBefore('#myform') 
       .ajaxStart(function() { 
        $(this).show(); 
       }).ajaxStop(function() { 
        $(this).hide(); 
       }); 
      });

來源

2012-11-15 user244394

除非有一個真正的理由不，我建議使用jQuery的驗證插件（http://docs.jquery.com/Plugins/Validation）。您可以輕鬆地通過ajax提交，顯示錯誤，微調等。 – dnagirl

用於加載圖像的最簡單的解決方案，你可以使用jQuery插件prettyLoader。

一旦DOM被加載這樣你那麼只需要初始化插件：

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function(){ 
     $.prettyLoader(); 
    }); 
</script>

，然後它會顯示一個加載圖標每當一個Ajax請求時，會自動。

更新表可以通過兩種方式來完成：要麼你加載HTML在Ajax請求，並簡單地覆蓋它：

$('#myTable').innerHtml = data;

或者你也可以用表的數據返回一個JSON對象，並把這個數據放入表格中。爲此，我建議您使用某種Viewmodel，例如Knockout.js。

來源

2012-11-15 16:57:34

，你可以添加到您的腳本：

// to show the loading spinner 

$("#loading").ajaxStart(function(){ 
    $('#loader').show(); 
}); 

// to hide the loading spinner 

$("#loading").ajaxStop(function(){ 
    $('#loader').hide(); 
});

裝載機將與寬度和高度與中央的加載GIF（100％的絕對定位的div元素的DIV如果你想或可能只是一個加載的短信，請等待...這樣）

來源

2012-11-15 17:20:11 Jai

謝謝..我怎麼會知道我的窗體已經完成加載，所以我可以在窗體完成加載後隱藏圖像？ – user244394

當您的ajax請求停止時，您的微調器將被.ajaxStop（）函數隱藏起來，因此無需任何操作。是的，這會做。 – Jai

它爲你工作！ – Jai

如何使用jquery添加加載圖片？

回答

相關問題