顯示等待圖像，等待MVC視圖顯示

我有一個MVC5 C＃視圖（剃鬚刀作爲視圖引擎），它從數據庫發送和檢索信息，它不使用jQuery，AJAX或JSOn使異步調用，以便每次向數據庫發送信息時刷新/重新加載視圖。顯示等待圖像，等待MVC視圖顯示

我想向用戶顯示一個圖像（發送圖像），以便讓用戶知道該頁面（MVC視圖）正在工作，並且有等待，我在頁面中有jQuery代碼並嘗試過：

<script language="JavaScript" type="text/javascript"> 
    $(window).load(function() { 
     $('#cargando').hide(); 
    }); 
</script> 

<style type="text/css"> 
    #cargando { 
     width: 350px; 
     height: 70px; 
     clear: both; 
     background-color: #FFFF00; 
     color: #CC0000; 
    } 
</style>

，並該div

<div id="cargando"><h3>Cargando página ...</h3> Sea paciente, los datos demoran en ser importados.</div>

但doesn't工作，請你告訴我如何顯示圖像視圖從集體訴訟」控制器再次呈現前？

這是我的看法

<div class="section"> 
    <div class="container"> 
     <div id="cargando"><h3>Cargando página ...</h3> Sea paciente, los datos demoran en ser importados.</div> 
     <div id="loading"> 
     <br /> 
     <div class="jumbotron"> 
      <div class="container"> 
       <img src="~/Imagenes/logo%logo.png" class="img-responsive" /> 
       <div class="row well"> 
        <div> 
         <img src="~/Imagenes/Portada.jpg" style=" height:40%; width:100%" /> <p style="margin-left: 10px"> 
         @*<img src="~/Imagenes/Edificio.jpg" style="height:3%; width:100%" />*@ 
         <h4>BIENVENIDO ...</h4> 
         <p>xxx permite ... </p> 
        </div> 
       </div> 
      </div> 
     </div>

來源

2017-06-02 Pablo Tobar

它不會是可能沒有Ajax，因爲當你做一個回發到你的服務器發送回一個新的HTML頁面和瀏覽器處理從無到有。要向用戶展示不同頁面之間或同一頁面的不同回發之間的加載圖像，您必須使用ajax請求，或者您可以使用iframe，這會使事情比ajax更復雜，並且在這種情況下不是首選。

繼jQuery方法會有所幫助： $ .load $就 $不用彷徨

來源

2017-06-02 19:33:34 user3051475

如果你想顯示「加載覆蓋」，是因爲你的服務器往返需要一段時間，你可以這樣做與JavaScript。新的頁面加載將重新隱藏加載屏幕。

將您主要內容的「疊加格」外，在頁面剛剛結束的</body>結束標記之前：

<div id="overlay" class="overlay"> 
    <div class="loader"></div> 
    <!-- Alternatively you can have some text here --> 
</div>

您的按鈕應該是這樣的：

<button id="mvc-action-button"> 
    Some Action 
</button>

一些用於覆蓋的CSS：

html { 
    min-height: 100%; 
} 

body { 
    min-height: 100%; 
    margin: 0; 
} 

.overlay { 
    display: none; 
    align-items: center; 
    justify-content: center; 
    background-color: rgba(0,0,0,0.8); 
    position: absolute; 
    z-index: 100; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
}

使用以下JS顯示loadin g屏幕：

document.getElementById('mvc-action-button') 
    .addEventListener('click', function(e) { 
    document.getElementById('overlay').style.display = 'flex'; 
});

看到這一切在這jsfiddle一起。

請注意，我已經使用flexbox將內容置於覆蓋頁面上，但這可能不適用於所有瀏覽器（，儘管現代瀏覽器應該沒問題）。

注意事項：如果您的後續頁面加載掛起或因任何原因失敗，用戶將被卡在加載屏幕或白色屏幕上，並且將不得不刷新頁面。

來源

2017-06-02 21:27:07

顯示等待圖像，等待MVC視圖顯示

回答

相關問題