10 초 동안 이미지 처리 표시

-6

10 초 동안 화면에로드 또는 진행 막대를 표시하려면 어떻게합니까? 내가 제출 버튼을 클릭 할 때 적어도 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>

여기 내 코드입니다.

출처

2014-12-15 kirti aajad

그래서 다른 시간 제한을 추가 할 수 있습니까? – epascarello

사용자가 10 초를 기다리고 싶다고 생각하는 이유는 무엇입니까? – adeneo

@adeneo 예 사용자 대기 10 초 –

fadeIn에 대한 함수 호출이 지연 되었기 때문에 #loading 요소가 페이드 인되기 전에 1 초가 걸릴 것입니다. 우리가 버튼을 클릭하면, 그것은 숨겨진 디스플레이를 갖고 싶은 경우에, 우리가 그것을 퇴색 할 필요가 나중에 특정 시간을 페이드 아웃, 다음

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

에서는 setTimeout 내에서 페이드 아웃 호출을 설정 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 초 동안 이미지 처리 표시

답변

관련 문제