javascript - 即使 div 类更改，图像也不会出现在 div 上

Question

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

如果它没有改变类，但它改变了，我会检查控制台。

基本上代码应该像这样工作:

1- 按下按钮

2-加载图像(css类:“加载”)

3- 开始 json 调用(大约需要 8 秒)

4-加载表(css类:“已加载”)

• HTML 和 javascript 在不同的文件中
• gif 动画在我将类更改为相反时加载。但是这次它加载了 json 表数据。

CSS:

div.loading {
    width: 600px;
    height: 600px;
    background: #FFF url('loading.gif') no-repeat 50% 50%;
}

div.loaded {
    width: 600px;
    height: 600px;
}

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:

<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>

Answer 1

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

在makeproxycall中的回调函数末尾添加类名开关:

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