只要正在執行jquery函數，就顯示一個加載圖像

我正在使用Spring MVC java web應用程序。該應用程序包含一個JSP頁面，在其上我有一個表格，在其中顯示來自數據庫的數據。數據顯示在屬於該類的文本輸入中。可編輯我實現了執行以下操作的腳本： - 從表中選擇文本輸入 - 使用文本輸入中的數據創建範圍 - 隱藏文本輸入只要正在執行jquery函數，就顯示一個加載圖像

function editableInput() { 
$('.editable').each(function() { 
var input = $(this); 
input.before("<span class='spanEditable'>" + input.val() + "</span>"); 
input.hide(); 
}); 
}

我稍後使用腳本來顯示行的文本輸入，當從無線電輸入中選擇行時。所有這些都用於創建一個允許CRUD操作的好看的表格，在一行中，當選中該行時，當沒有選中行時，它將顯示所有表格內容，如純文本，而不是使用文本輸入。

我正面臨的問題是：當頁面加載時，它顯示所有表格行，就像它最初製作的那樣，所有數據都是文本輸入，腳本完成後，所有數據都顯示在跨度中。這看起來非常糟糕，直到所有的東西被加載。

如何使用加載gif，直到函數editableInput（）完成？如果我想使用AJAX調用我想知道如何添加加載GIF，但這是我真的如何調用該函數：

$(document).ready(function() { 
editableInput();)};

來源

2012-09-09 Adrian Bob

你是如何將數據初始化爲輸入的？從Java或在瀏覽器？ – TheVillageIdiot

我從控制器發送一個ArrayList，並且我正在使用JSP頁面中的循環來使用列表中的數據填充表中的輸入。 –

您可以用jQuery BlockUI Plugin (v2)

來源

2012-09-09 15:49:24

謝謝，這將工作，但我不想禁用整個頁面，我只想隱藏表div，直到我寫的函數執行，並顯示加載.gif圖像，直到表正確加載 –

看看http://www.malsup.com/jquery/block/#element –

謝謝你的答案，雖然這會工作，我不喜歡它的外觀，我真的很想使用衆所周知的ajax-loading.gif圖像 –

實驗，那麼你可以嘗試這一個，雖然很粗糙，但會起作用。在加載頁面換你的表到另一個DIV使用：

$("table#table1").wrap("<div id='dvWrapp' style='background-color:#000;'/>");

然後完成editableInput電話後剛解開它：

$("table#table1").unwrap();

您可以設置樣式爲包裝DIV顯示加載圖像或某消息也。

請試試這個例子：http://jsfiddle.net/amantur/FkjkR/

來源

2012-09-09 15:54:49 TheVillageIdiot

我剛剛嘗試過您建議的第一行，它的功能是這樣的：-in hmtl code使用背景包含表格的div：black;樣式

，但表格仍然可見 –

您需要使用CSS for div。但是因爲blockUI適合你，所以它很好。 – TheVillageIdiot

我應該在div的css中更改哪些內容，以便表格不可見？ blockui的作品，但我更喜歡一個「更輕」的動畫，像一個小的加載gif –

只要正在執行jquery函數，就顯示一個加載圖像

回答

相關問題