当 jQuery 中的 img 预先加载时隐藏 div答案

【问题标题】：Hide div when img in jQuery prepend load当 jQuery 中的 img 预先加载时隐藏 div
【发布时间】：2017-07-17 08:54:55
【问题描述】：

在 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();    
});

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

【问题讨论】：

标签： javascript jquery html grafana

【解决方案1】：

由于您本质上是在“猜测” 3 秒，这不是很科学，但有更好的方法。

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

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

【讨论】：

【解决方案2】：

sleep 不是 javascript 中的函数。你需要使用setTimeout或setInterval

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

更多信息here

【讨论】：