표시 방법 이미지로드 다른 페이지로 리디렉션하기 전에?

Question

로딩 할 이미지가 있습니다. 누군가가 div를 클릭하면 다른 페이지로 이동하도록 리디렉션하는 onclick 메서드를 사용하고 있습니다. 페이지가 다른 페이지로 리디렉션되는 동안 어떻게 loading.gif 이미지를로드 할 수 있습니까? 나는 이것이 더 사용자 친화적 일 것이고 로딩되는 나의 페이지는 일반적으로 약 15 초가 걸리기 때문에 이것을 정말로 사용하고 싶다. 아래 코드를 시도했지만 작동하지 않습니다.

다음

내 코드는,

<div data-align="center" id="mainDiv" style="height:100%; background-image:url('images1/pattern1.png')"> 
    <table id="login"> 
     <tr> 
      <td align="right"> 
       <span>UserName :</span> 
      </td> 
      <td> 
       <input type="text" id="txtUsername" runat="server"/> 
      </td> 
     </tr> 
     <tr> 
      <td align="right"> 
       <span>Password :</span> 
      </td> 
      <td> 
       <input type="password" id="txtPassword" runat="server"/> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2" align="center"> 
       <input type="button" class="LoginButton" value="Login" onclick="Login();"/> 
      </td> 
     </tr> 
    </table> 
<span id="loading" style="visibility: hidden; text-align: center;"> 
    <img src="images1/loading.gif" id="Img5" data-transition="slide" /> 
</span> 
</div> 

<script type="text/javascript"> 
    function Login() { 
    document.getElementById("mainDiv").style.visibility = 'hidden'; 
    document.getElementById("loading").style.visibility = 'visible'; 
    location = "Default.aspx"; 
    }; 
</script> 

어떤 도움을 크게 감상 할 수있다.

감사합니다.

Answer 1

보십시오. 부분 또는 전체 다시 게시가 발생하면 (예를 들어 버튼 클릭시) 로딩 이미지를 표시 할 수 있고 데이터가 제공되면 EndRequestHandler에서 로딩 이미지를 숨길 수 있습니다.

<script type="text/javascript"> 
    function pageLoad(sender, args) { 
     var prm = Sys.WebForms.PageRequestManager.getInstance(); 
     prm.add_beginRequest(BeginRequestHandler); 
     prm.add_endRequest(EndRequestHandler); 
    } 

    function BeginRequestHandler(sender, args) { 
     document.getElementById("mainDiv").style.visibility = 'hidden'; 
     document.getElementById("loading").style.visibility = 'visible'; 
    } 

    function EndRequestHandler(sender, args) { 
     document.getElementById("mainDiv").style.visibility = 'visible'; 
     document.getElementById("loading").style.visibility = 'hidden'; 
    } 
</script> 

귀하의 HTML 태그는 다음 SO 내 다른 게시물 here를 참조 jQuery 플러그인을 사용하여 열려있는 같은

<div id="mainDiv"> 
    ... 
    ... 
</div> 

<div id="loading" style="visibility: hidden;text-align: center;"> 
    <img src="images1/loading.gif" id="Img5" data-transition="slide" /> 
</div> 

이하 또는 경우 일 것이다.

Answer 2

시도는 또 다른 문제가 아직 선언되지되지 않은 Div1에 온 클릭 이벤트를 부착되어있는 mainDiv 컨테이너

<div id="mainDiv"> 
    ... 
</div> 

<span id="loading" style="visibility: hidden; text-align: center;"> 
    <img src="images1/loading.gif" id="Img5" data-transition="slide" /> 
</span> 

외부 이미지 래퍼를 넣어. 당신은 아주 잘 BeginRequestHandler 및 EndRequestHandler 이벤트를 통해이 문제를 해결할 수

document.getElementById("mainDiv").onclick = function() { 
    // your code 
}