문제 "처리 중"스플래시 화면 숨기기

양식을 제출할 때 트리거되는 "처리 중"애니메이션이 포함 된 div가 있습니다.문제 "처리 중"스플래시 화면 숨기기

<form action='index.php?page=2' method='post' onsubmit="javascript:processingBox();">

MOST 페이지에 유용합니다. 내가 가진 문제는, 내 양식의 일부는 다음 코드를 다운로드하여 실행할 것입니다 :

//BEGIN DOWNLOAD HEADER SECTION// 
header("Pragma: public", true); 
header("Expires: 0"); // set expiration time 
header("Cache-Control: must-revalidate, post-check=0, pre-check=0"); 
header("Content-Type: application/force-download"); 
header("Content-Type: application/octet-stream"); 
header("Content-Type: application/download"); 
header('Content-Disposition: attachment; filename='.$filename); 
header("Content-Transfer-Encoding: binary"); 
header('Connection: Keep-Alive'); 

//WRITE OUT HEADER// 
echo $output; 
//WRITE OUT RECORDS// 
while ($row = mysqli_fetch_array($sql)) { 
    $output = ""; 
    for ($i = 0; $i < $columns_total; $i++) { 
     $output .= $_POST['enclosed'] . $row["$i"] . $_POST['enclosed'] . $_POST['delimiter']; 
    } 
    echo "\r\n"; 
    echo substr($output,0,strlen($output)-1); 
} 
exit;

여기에 명백한 문제가 (이 아니가 설계된대로)이 스크립트는 페이지를 새로 고침하지 않는다는 것입니다 만 제출시 표시되는 처리 시작 부분을 지우지 않습니다.

이 시나리오에 대한 유용한 정보가 있습니까?

편집 :

<script type="text/javascript"> 
function processingBox() { 
    div = document.getElementById('processingBox'); 
    div.style.visibility = "visible"; 
} 
</script> 

<div class='processingBox' id='processingBox'> 
    <h1 style='margin-top:0px;margin-bottom:30px;'>Processing</h1> 
    <div class="circle"></div> 
    <div class="circle1"></div> 
</div>

출처

2014-06-12 Kirk Logan

다운로드가 AJAX를 통해 이루어집니다 있나요? 그렇다면 자바 스크립트에서 "애니메이션"을 숨길 필요가 있습니다. 일반적으로 Ajax 호출로 return 함수를 지정할 수 있어야합니다. 파일이 업로드되면이 함수를 호출해야합니다. 그것으로부터 당신은 당신의 애니메이션을 숨길 것입니다. – mogosselin

'processingBox()'함수를 보여줍니다. –

어쩌면 업로드 양식의 HTML 및 JavaScript 코드 ... – mogosselin

이것은 악명 어려운 문제이며,이 불쾌 다양한 수준의 여러 솔루션을 제공합니다. 서버에 파일을 사용

가 : 여기에 내가 알고있는 최고의 사람입니다가 (당신이 자바 스크립트 라이브러리를 사용하지 않는 경우, 또는 XHR) Ajax를 사용하여 양식의 내용을 제출, 그리고 서버 측에서 레코드를 임시 파일로 저장하는 대신 사용자에게 직접 보낸 다음 해당 파일에 대한 링크를 반환하십시오. 브라우저로 돌아가서이 Ajax가 완료되면 처리 상자를 제거하고 사용자에게 반환 된 링크를 보낼 수 있습니다. 이는 두 가지 요청이 필요하고 서버의 디스크에 기록해야하기 때문에 불완전합니다 (그러나 브라우저의 100 %에서 작동합니다!).

쿠키 사용 : 허용 된 대답은 this question이며 하나의 요청만으로 작동하는 가장 포괄적 인 솔루션이지만 복잡하고 쿠키가 필요합니다 (소수의 사용자가 사용 중지 한 경우).

사용 iframe을 : 또 다른 옵션은 양식에 숨겨진 iframe을 대상해야하고, 처리 상자를 제거하기 위해 iframe을의 onload 이벤트를 사용하는 것입니다.

<iframe id="downloadTarget" onload="removeProcessingBox();"></iframe> 
<form ... target="downloadTarget" ... ></form>

그러나 불행하게도, Chrome doesn't fire the onload event for file downloads (이 사용자의 많은 수에 영향을 미칠 것이라고 나는 생각한다).

내 조언 : 파일 다운로드은 처리 애니메이션을 건너 뛰고 그냥 시간이 걸릴 수 있습니다 말한다 텍스트 ...

출처

2014-06-13 11:05:13 pieman72

매우 포괄적 인 답변을 주셔서 감사합니다. 아마도 이러한 조언을 듣고 스플래시 페이지를 드롭 할 것입니다. 매우 성가신 문제지만 훌륭한 대답! 다시 한 번 감사드립니다! –

문제 "처리 중"스플래시 화면 숨기기

답변

관련 문제