完成功能开始和结束加载屏幕后开始加载屏幕。 （JavaScript）的

Question

我有一个javascript应用。我想在开始做某事之前显示加载屏幕并在完成某些操作时停止加载屏幕。这是我的代码。

btn_start.addEventListener('click',function(){
    $('#loading-screen').show(); 
    //do something (example i do function in object)
    the_object.startFuntion(param1);
    $('#loading-screen').hide();
});

如果我使用该代码，加载屏幕不会出现，所以应用程序暂停，然后the_object.startFunction（param1）刚刚完成而没有加载屏幕。

更新： div看起来像这个

<div id="loading-screen">
    <img src="img/loading.gif" id="img-loading">
</div>

实际上我尝试生成单词搜索板（在单词搜索游戏中）。在显示电路板之前有很多过程，我试图在生成电路板时显示加载屏幕。

这里是加载屏幕的CSS：

#loading-screen{ 
  background-color: white;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index : 1000;
  text-align: center;
  display: block;
  display: none;
}

#loading-screen:before {   
    content: ' ';
    display: inline-block;
    vertical-align: middle; 
    height: 100%;
}

#img-loading{
  vertical-align: middle;
  width: 80%;
  height: auto;
  margin:auto;    
}

Answer 1

你需要使用setTimeout函数，否则它会立即生效，因为.hide（）通常不会应用动画对象。

btn_start.addEventListener('click',function(){
    $('#loading-screen').show('slow'); 
    //do something (example i do function in object)
    the_object.startFuntion(param1);
   setTimeout(function() { $('#loading-screen').hide('slow'); }, 5000);
});

你的html应如下所示，并尝试添加慢动画以检查更多内容

<div id="loading-screen" style="display: none">
  <img src="img/loading.gif" id="img-loading">
</div>

演示

https://jsfiddle.net/4t3mLjxz/2/