java - 只要 jquery 函数正在执行，就显示加载图像

Question

我正在开发 Spring MVC java Web 应用程序。该应用程序包含一个 JSP 页面，上面有一个表，在其中显示来自数据库的数据。数据显示在属于 .editable 类的文本输入中我实现了一个执行以下操作的脚本:-从表中选择文本输入，- 使用文本输入中的数据创建一个范围-隐藏文本输入

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(); )};

Answer 1

您可以尝试使用 jQuery BlockUI Plugin (v2)