Javascript 即使div类更改，图像也不会显示在div上

在页面将JSON数据加载到div之前，我尝试以.gif格式显示动画。但它不显示gif

我在控制台中检查它是否没有改变类，但是它改变了

基本上，代码应该是这样工作的：

1-按下按钮

2-加载图像css类：加载

3-启动json调用大约需要8秒

4-加载表格css类：已加载

HTML和javascript在不同的文件中 当我将类更改为相反的类时，会加载gif动画。但这次它加载到json表数据上。 CSS:

Javascript:

function loadOutputs() {
console.log(document.getElementById('loadingElement').className);
document.getElementById("loadingElement").className = "loading";
console.log(document.getElementById('loadingElement').className);

makeProxyCall(
        "http://localhost:9090/myService/tool/runTool?tool=myTool",
        function(data) {


            var globalCounter = 0;
            var tbody = document.getElementById('tbody');

            var trheader = "<tr><td>Name</td><td>Value</td><td>Type</td><td>UnitOfMeasure</td><td>Mode</td></tr>"
            tbody.innerHTML = trheader;

            for ( var i = 0; i < 10; i++) {
                var tr = "<tr>";
                //if (obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2) obj[i].value += "0";

                tr += "<td>" + data[0][i].name + "</td>" + "<td>"
                        + data[0][i].value + "</td>" + "<td>"
                        + data[0][i].type + "</td>" + "<td>"
                        + data[0][i].unitOfMeasure + "</td>" + "<td>"
                        + data[0][i].mode + "</td></tr>";
                tbody.innerHTML += tr;
            }
        });
document.getElementById("loadingElement").className = "loaded";
console.log(document.getElementById('loadingElement').className);

}

HTML:

---

javascript是异步执行的。类名“loaded”是在makeproxycall完成之前设置的

将classname开关添加到makeproxycall中回调函数的末尾：

function loadOutputs() {
console.log(document.getElementById('loadingElement').className);
document.getElementById("loadingElement").className = "loading";
console.log(document.getElementById('loadingElement').className);

makeProxyCall(
        "http://localhost:9090/myService/tool/runTool?tool=myTool",
        function(data) {


            var globalCounter = 0;
            var tbody = document.getElementById('tbody');

            var trheader = "<tr><td>Name</td><td>Value</td><td>Type</td><td>UnitOfMeasure</td><td>Mode</td></tr>"
            tbody.innerHTML = trheader;

            for ( var i = 0; i < 10; i++) {
                var tr = "<tr>";
                //if (obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2) obj[i].value += "0";

                tr += "<td>" + data[0][i].name + "</td>" + "<td>"
                        + data[0][i].value + "</td>" + "<td>"
                        + data[0][i].type + "</td>" + "<td>"
                        + data[0][i].unitOfMeasure + "</td>" + "<td>"
                        + data[0][i].mode + "</td></tr>";
                tbody.innerHTML += tr;
            }
        });
document.getElementById("loadingElement").className = "loaded";
console.log(document.getElementById('loadingElement').className);

<div id="loadingElement" class="loaded">
    <button type="button" class="btn-blue"
        style="top: 80px; right: 130px;" onclick="loadOutputs()">Load
            Outputs</button>
            <table>
                <tbody id="tbody"></tbody>
            </table>
</div>

makeProxyCall(
  "http://localhost:9090/myService/tool/runTool?tool=myTool",
  function(data) {


    var globalCounter = 0;
    var tbody = document.getElementById('tbody');

    var trheader = "<tr><td>Name</td><td>Value</td><td>Type</td><td>UnitOfMeasure</td><td>Mode</td></tr>"
    tbody.innerHTML = trheader;

    for ( var i = 0; i < 10; i++) {
      var tr = "<tr>";
      //if (obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2) obj[i].value += "0";

      tr += "<td>" + data[0][i].name + "</td>" + "<td>"
                   + data[0][i].value + "</td>" + "<td>"
                   + data[0][i].type + "</td>" + "<td>"
                   + data[0][i].unitOfMeasure + "</td>" + "<td>"
                   + data[0][i].mode + "</td></tr>";
      tbody.innerHTML += tr;
    }
    document.getElementById("loadingElement").className = "loaded";
  });