显示等待图像，等待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视图显示

回答

相关问题