Question

我试图在页面上加载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>

Answer 1

javascript以异步方式执行。在makeproxycall完成之前设置了类名“已加载”。

在makeproxycall：

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

即使div类改变，图像也不会出现在div上

1 个答案: