Question

如何在屏幕上显示加载或进度条10秒？

这是我的代码：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">

</script>
<script>
$(function(){

    $('#loadaing').hide();

    setTimeout(function(){
        $('#loading').fadeIn('slow');
    },1000);

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

<form  action="" >
<br />
<input type="submit"  value="Click!" style="width:100px;" onclick="$('#loading').show();"/>
</form>
<div id="loading" style="display:none;"><img src="loading_orange.gif" alt="" />Loading!</div>
</body>
</html>

我想实现给定的加载图像，当我点击提交按钮时，显示它至少10秒。

Answer 1

现在你的#loading元素在淡入之前需要1秒钟，因为我们已经延迟了fadeIn的函数调用。如果我们想隐藏它，在点击按钮时显示，然后在一段时间后淡出，我们需要淡入它，然后在setTimeout中设置fadeOut调用

＆＃13;

//cache the DOM element so we dont query it over and over
var imageLoading = $('.image-loading')

//hide it 
imageLoading.hide();

//add event listner to the trigger button

$('.trigger-loading').on('click', function () {
    
    //show it
    imageLoading.fadeIn();
    
    //wait a second and then hide it again
    setTimeout(function () {
        imageLoading.fadeOut();
    }, 1000);
});

＆＃13;

body {
    text-align: center;
}
.image-loading {
    background-color: blue;
    color: white;
    width: 200px;
    height: 100px;
    margin: 100px auto;
    text-align: center;
}
.image-loading h3 {
    padding-top: 30px;
}
.trigger-loading {
    margin: 0 auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-loading">
    <h3>Image Loading</h3>
</div>
<button class="trigger-loading">Show image loading</button>

＆＃13;

http://jsfiddle.net/bhwg87ks/

Answer 2

＆＃13;

<input type="submit"  value="Click!" style="width:100px;" onclick="$('#loading').show(0, function () { setTimeout(function(){ $('#loading').hide(); }, 10000); });;"/>

＆＃13;

Answer 3

你正在准备doc的装载机中消失，就这样做：

<script>
$(function(){

    $('#loadaing').hide(); //Hide loader firstly

});

function showLoader(){

  $('#loading').fadeIn('slow'); //First display loader
  setTimeout(function(){
     $('#loading').fadeOut('slow'); //Then hide it after specified time
  },1000);

}
</script>

并将其称为onclick：

<input type="submit"  value="Click!" style="width:100px;" onclick="showLoader();"/>

Answer 4

您可以链接事件并使用延迟

$('#loading')
    .fadeIn('slow')
    .delay(10000)
    .fadeOut("fast");

Answer 5

我只是用这个简单的。唯一的问题是它是否显示未处理。

 <input type="submit" value="Upload Document" class=verd9 onclick="javascript:showElement('process')">

 <div class="general" id="process" style="display:none;" align=center>
 <br>
 Compressing and Uploading
 <br><br>
 <img src="images/processing3.gif">
 <br><br>
 Please Wait
 <br>
 </div>

显示图像处理10秒

5 个答案: