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

【问题标题】：Image does not appear on div even though div class changes即使 div 类更改，图像也不会出现在 div 上
【发布时间】：2023-04-06 11:37:01
【问题描述】：

我试图在页面加载 div 上的 JSON 数据之前显示 .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>

【问题讨论】：

标签： javascript html css

【解决方案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";
  });

【讨论】：