Question

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>

Answer 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;



}

Answer 2

以下是js小提琴的演示代码希望它有所帮助

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

HTML CODE

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

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

    </div>

JQUERY CODE

$(document).ready(function() {

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

Answer 3

在delay(2000)之前使用fadeOut。

Answer 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>

使用jquery为微调器设置延迟时间

4 个答案:

HTML

Jquery的

CSS