使用 jquery 设置微调器的延迟时间答案

【问题标题】：set a delay time for spinner using jquery使用 jquery 设置微调器的延迟时间
【发布时间】：2020-12-01 18:17:22
【问题描述】：

大家好，Stack Overflow 的朋友们。我正在寻找一种在我的网站上添加微调器的方法，我发现了这个有用的代码，但我唯一缺少的是用于在微调器上设置延迟或持续时间的代码，我真的希望它显示为 2秒。任何建议...

<html>
<head>

<script type="text/javascript">
    $(window).bind("load", function() {
        $('#overlay').fadeOut(function() 
        {   

       $('#container').fadeIn();

        }); 

    });
</script>
</head>
<body>

    <div id="overlay">
         <img src="ajax-loader.gif" alt="Loading" />
         Loading...
    </div>
    <div id="container" style="display:none">

    </div>

</body>
</html>

【问题讨论】：

添加一个小提琴，以便它易于使用以及您正在尝试做的事情
这是我想要达到的目标，但我想知道如何将微调器的持续时间设置为 2 或 3 秒。 jsfiddle.net/HYVv7
嘿，也请点赞

标签： javascript jquery spinner delay

【解决方案1】：

Click for Demo show loading pic for 3 seconds and then showing the content[Solved]

HTML

<div id="overlay">
         <img src="http://cdn.nirmaltv.com/images/generatorphp-thumb.gif" alt="Wait" alt="Loading" />
         <div id="overlayText">

Wait  
Loading
    </div>
    </div>
    <div id="container"  >

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>

jQuery

var delay = 3000;
setTimeout(function() 

    {  

        $( "#overlay" ).fadeOut( "slow" );

         $('#container').fadeIn();

    },
    delay
) ;

CSS

#overlay >img{

    position:absolute;
    top:300px;
    left: 320px;

    z-index:10;


}


#overlayText{
     position:absolute;
    top:365px;
    left: 330px;

   z-index:11;

}
#container{
    position:relative;
       display:none;
}
#overlay{

  width:100%;
    height:100%;
    position: absolute;
    top:0px;
    z-index: 2;
    background-color:#222;
    opacity:0.7;



}

【讨论】：

【解决方案2】：

在fadeOut 之前使用delay(2000)。

【讨论】：

嘿 user3127499...谢谢您的解决方案。这正是我想要的。
@xzibit thanx 你说的是别人的回答：D

【解决方案3】：

这里是 js fiddle 的演示，希望对您有帮助

http://jsfiddle.net/pragneshok/ZQSN3/4/

HTML 代码

<div id="overlay" style="position:absolute;">

         Loading...
 </div>
    <div id="container" style="display:none;background:#000;height:300px;width:300px;">

    </div>

JQUERY 代码

$(document).ready(function() {

        $('#overlay').fadeOut(2000,function(){
            $('#container').fadeIn(1000);
        });
});

【讨论】：

【解决方案4】：

仅供参考，以防有人偶然发现这个问题：

Bootstrap 有一系列非常易于使用的微调器。将它与用于淡入的 animate.css 结合使用，只需很少的代码即可实现。见https://getbootstrap.com/docs/4.5/components/spinners/ https://animate.style/

<div class="d-flex justify-content-center animate__animated animate__fadeIn">
    <div class="spinner-border text-primary" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>

【讨论】：