jQueryのimgをdivで表示しない前にロード

Question

をjQueryで作成するGrafanaから生成されたイメージを読み込む行頭があります。 Grafanaイメージの生成とロードに約3秒かかるため、「ロード中」のテキストを表示している別のdivがあります。

問題は、プレフィックス行の直後にその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;">

Answer 1

睡眠はJavaScriptで関数ではありません。あなたは、本質的に3秒を「推測」しているとsetTimeoutまたはsetInterval

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

詳細情報here

Answer 2

を使用する必要があり、これは非常に科学的ではなく、より良い方法があります。

代わりに、あなたは.fadeIn()で.show()を交換し、コールバックを使用することができます

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

を