Отображение обработки изображения в течение 10 секунд

-6

Как я могу показать экран загрузки или выполнения на экране в течение 10 секунд?Отображение обработки изображения в течение 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 секунд при нажатии на кнопку отправки.

источник

2014-12-15 kirti aajad

Так добавить еще один тайм-аут? – epascarello

Что заставляет вас думать, что ваши пользователи хотят ждать 10 секунд? – adeneo

@adeneo да я хочу, чтобы пользователь ждал 10 секунд –

Как только ваш элемент #loading займет 1 секунду, прежде чем он затухает, поскольку мы задерживаем эту функцию для fadeIn. Если мы хотим, чтобы он скрытый, дисплей при нажатии кнопки, а затем исчезать некоторое время спустя, мы должны исчезать его, а затем установить вызов FADEOUT в SetTimeout

//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); 
 
});

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

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

http://jsfiddle.net/bhwg87ks/

источник

2014-12-15 19:23:55 Aweary

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

источник

2014-12-15 19:24:12 lem2802

Вы выцветанию загрузчик на док готовы, просто сделать это следующим образом:

<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();"/>

источник

2014-12-15 19:29:11

Вы можете цепи событий и задержки использование

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

источник

2014-12-15 19:29:13 epascarello

Отображение обработки изображения в течение 10 секунд

ответ

Смежные вопросы