Question

我试图简单地隐藏我的加载div一旦主要div在JQuery中完全加载，我在线尝试的所有建议似乎都不起作用而且我被卡住了。

我最初尝试按顺序执行此操作：

$("#main").show();
$("#loading").hide();

但是在节目完成之前触发了隐藏功能

然后我尝试在回调函数中执行此操作，如下所示：

$("#main").show(500, function(){
    $("#loading").hide();
});

但是这太快了，所以装载会消失，直到主要的div显示哪个不是我想要的，才会有半秒钟。

然后我尝试使用promise方法，如下所示：

$("#main").show().promise().done(function(){
    $("#loading").hide();
});

但这会立即隐藏装载div，在主div显示之前你几乎看不到它。

我找不到任何其他方法来做到这一点。

Answer 1

替换您的代码：

$("#main").show(500, function(){
    $("#loading").hide();
});

使用：

setTimeout(function () {
    $("#main").show(0, function(){
        $("#loading").hide();
    });
}, 500);

或使用：

$("#main").delay(500).show(0, function(){
    $("#loading").hide();
});

Answer 2

在隐藏加载div之前设置超时。

setTimeout(function(){
    $("#loading").hide(); 
}, 1000);

Answer 3

在节目中添加了jQuery完整事件处理程序，因此它会在完成时隐藏加载div：

$("#main").show(complete(function(){
        $("#loading").hide();
    });

Answer 4

这是你在找什么？

$("#main").show(1000, function() {
  $("#loading").hide();
});

#main {
  width: 100px;
  height: 100px;
  background-color: red;
}
#loading {
  position: absolute;
  top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="main" hidden></div>
<div id="loading">Loading...</div>

Answer 5

您可以这样做：

$('#outer').on('click', function(event)
{
    $('#inner').show(0).delay(500).hide(0);    
});

请参阅此答案：https://stackoverflow.com/a/4508657/1085414

show完成jquery后直接使元素隐藏

5 个答案: