当jQuery中的img加载时隐藏div

时间:2017-07-17 08:54:55

标签: javascript jquery html grafana

在jQuery中我有一个前置行,它从Grafana加载生成的图像。 我有另一个div显示"正在加载"文本,因为Grafana图像生成并加载大约需要3秒钟。

问题是,如果我在前置行之后立即隐藏该div,它会立即隐藏。

有没有解决方案?



$("#t1_temp_act").click(function() {
    console.log("append");
    $("#grafana-image").remove();
    $("termostat1_grafana").hide();
    $(".termostat1_grafana_loading").show();
    $(".termostat1_grafana").prepend("<img id=\"grafana-image\" src=\"http://192.168.1.113:3000/render/dashboard-solo/db/legadademo?orgId=1&from=now-1d&to=now&panelId=3&width=670&height=350&tz=UTC%2B02%3A00\">Nalaganje v teku...</img>");    
    $(".termostat1_grafana").show();
    sleep(3000);
    $(".termostat1_grafana_loading").hide();    
});
&#13;
<div class="termostat1_grafana_loading" style="text-align: center; width: 100%;"><b>Nalaganje v teku...</b></div>
<div class="termostat1_grafana" style="width:100%;margin-top: 10px;">
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:2)

因为你本质上是猜测&#34; 3秒,这不是很科学,而且还有更好的方法。

相反,您可以将.show()替换为.fadeIn()并使用回调:

$(".termostat1_grafana").fadeIn( 10, function() { /* 10 is almost as fast as .show() */
    // animation complete
    $(".termostat1_grafana_loading").hide();
});

答案 1 :(得分:0)

睡眠不是javascript中的一个功能。您需要使用setTimeoutsetInterval

setTimeout(function() {
    $(".termostat1_grafana_loading").hide();
},3000);

更多信息here