开始加载屏幕时，功能开始和结束加载屏幕时，完成.(Javascript)

Start loading screen when function start and end loading screen when done. (Javascript)

本文关键字：开始 屏幕 加载 Javascript 功能 结束 完成      更新时间：2023-09-26

我有一个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;    
}

你需要使用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/

相关文章：