如何在 javascript 中生成我的 table 之前显示加载图标

Question

我有一个 UI 可以在浏览器中将 csv 文件转换为 table。但是 table 生成需要大约 15 秒的时间。在生成 table 之前，我想让一个加载图标出现而不是一个警告框。下面是我的代码。

$.getJSON(json_link, function (result) { 
                        var th_main = "";
                        for (var e in result['fields']) {
                            th_main = th_main + '<th>' + e + '</th>';
                        }
                        var table_header = '<thead>' +
                                '<tr>' +
                                th_main +
                                '</tr>' +
                                '</thead>';
                        var body_main = "";
                        for (var i = 0; i < result['rows'].length; i++) {
                            var tr = "<tr>";
                            for (var ele in result['rows'][i]) {
                                tr = tr + '<td>' + result['rows'][i][ele] + '</td>';
                            }
            var tr = tr + "</tr>";
                            body_main = body_main + tr;
                        }
                        var table_body = '<tbody>' + body_main + '</tbody>';
                        var table = "<table class='table table-bordered table-hover table-condensed table-striped'>" + table_header + table_body + "</table>";
                        alert("Loading...Please wait!");
                        $(".jumbotron").dialog("open")
                                .dialog({
                                    height: 670,
                            title : data1,
                            width: 1130,
                            resizable: true,
                            open: function (type, data) {
                                $(this).parent().appendTo("form");
                            }
                        })
                                .dialogExtend({
                                    "closable": true,
                            "titlebar": 'transparent',
                            "minimizable": true,
                            "minimizeLocation": "right",
                            "icons": {
                                "close": "ui-icon-circle-close",
                                "minimize": "ui-icon-circle-minus",
                                "maximize" : "ui-icon-circle-plus",
                                "restore": "ui-icon-circle-triangle-n"
                            }
                        });

Answer 1

你可以尝试这样的事情

$(".someSpinnerImage").show();
$.getJSON(json_link, function (result) { 
   // Do something with data
    $(".someSpinnerImage").hide();
}

Answer 2

$('.loading').show();
$.getJSON(json_link, function (result) { 
  // your code here
  $('.loading').hide();
});

.loading{
  position:fixed;
  display:block;
  width:100%;
  height:100%;
  background-color:rgba(255, 204, 204,.9);
  top:0;
}
.loading img{
  position:absolute;
  left:50%;
  top:50%;
  margin-top:-18px;
}

<div class="loading">
  <img src="http://www.ajaxload.info/images/exemples/21.gif"/>
</div>

这个图片加载演示DEMO

如何在 javascript 中生成我的 table 之前显示加载图标

How to make a loading icon appear till my table is generated in javascript

javascript

jquery

loading