如何顯示加載圖片重定向到其他頁面之前？

我有一個圖像來加載。我使用onclick方法重定向，所以當有人點擊一個div時，它會將它們帶到另一個頁面。如何在頁面重定向到另一個頁面時加載一個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>

任何幫助將不勝感激。

謝謝。

來源

2014-10-29 Arpita

你能發佈更多一點的HTML，所以我們可以看到mainDiv – 2014-10-29 16:33:57

添加的回調在您的網頁，如在緊接加載GIF劇本，但是一旦在頁面加載它隱藏它。 – 2014-10-29 16:35:31

您的代碼正在爲我工作。我加了一行「alert（」OK「）;」就在「location = Default.aspx」之前。當我點擊按鈕時，屏幕上會出現一個加載GIF圖像，並顯示「OK」消息。 IE和Firefox確定。 – nunzabar 2014-10-29 17:23:45

你很可能通過BeginRequestHandler和EndRequestHandler事件處理這個問題。當發生部分或全部回發時（在您的情況下點擊按鈕），您可以顯示加載圖像以及數據何時送達，您可以隱藏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標記會像下面

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

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

或者，如果你是開放的使用jQuery插件，然後參照上，所以我的另一篇文章here。

來源

2014-10-29 17:11:19

它的工作。但它顯示在頁面的左下角。我嘗試設置邊距和Z指數，但它不動。 – Arpita 2014-10-29 18:20:09

很好用。您始終可以調整加載圖像div的位置，這取決於您在頁面中的佈局。有一個結構類似父格，並在那裏顯示所有孩子的div'

....

...

' – 2014-10-29 18:23:22

非常感謝你。我將處理加載圖像的位置。 – Arpita 2014-10-29 18:27:33

嘗試把圖像包裝的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>

之外的另一個問題是，你連接到Div1構成onclick事件這不是尚未宣佈。嘗試

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

來源

2014-10-29 16:40:36 Vytalyi

試過。沒有工作。 – Arpita 2014-10-29 16:48:04

好還有另一個問題....嘗試用「的document.getElementById（」 mainDiv「），以取代「Div1.onclick」的onclick」 – Vytalyi 2014-10-29 16:57:15

如何顯示加載圖片重定向到其他頁面之前？

回答

相關問題