如何在MVC视图之间显示“加载中”

Question

我有一个视图，其中包含由jQuery生成的数据表。在该表中，其中一列有一个链接（标准的<a href="">），链接到另一个视图（完全分离的控制器）。点击该链接可能会引起长时间的加载时间，因为正在加载的视图可能要处理大量的数据，才能将其结果呈现在屏幕上。

是否有一种方法，在单击这些链接时，可以获得“加载旋转图标”，直到新屏幕加载完成？

再次说明，这是一个标准的超链接（href），链接到完全不同的视图和控制器。

- PKD

---

如果您没有使用ajax来加载其他视图，则无法实现。如果您正在使用ajax进行加载，则只需要在加载html之前将旋转器放入div中即可。 - Nathan Koop

视图是完全独立的页面 - 两个.aspx视图。当我点击链接进入第一个页面“Page1.aspx”后，我并不真正处于“Page1.aspx”上...即使它在浏览器中展示。实际上，我正在等待数据的同时处于“Page2.aspx”上。遗憾的是，浏览器并不知道这一点。 - PKD

在我一些只需要向用户显示“请稍等”消息直到下一页加载的网站中，我使用jQuery Block UI插件。当单击该链接时，我只需调用blockUI函数以显示自定义等待消息。如果你感兴趣，我可以在答案中提供更详细的内容。如果这是你想要做的全部内容，那么这只是一个建议。 - B Kirby

@BKirby 实际上，这听起来很棒。我非常有兴趣看到它。 - PKD

我刚刚注意到（因为我们实际上还没有在网站中使用它），我有jquery.blockUI.js！所以，我猜你的方法可能是将href设置为<a href="#" onClick="block('/myPage/' + variableId + )">转到新页面</a>？ - PKD

Answer 1

这是我网站的一个示例，包含提交按钮并在点击后简单地阻止用户界面。下图显示了用户随后看到的内容。收集数据后，新页面将被加载并呈现。

<input type="submit" value="Search" name="searchparty">

<script>
//submit search, display loading message
    $('input[type = submit]').click(function(){
        $.blockUI({ css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#000',
            opacity: .6
        } }); 
    });
</script>

- B Kirby

---

使用blockUI真是救星啊！非常感谢你指出这一点。我今天早上已经在几个页面中加入了它，而且我对它非常着迷。 :) - PKD

太棒了，很高兴听到这个消息！ :) - B Kirby

我尝试过了，但是“正在加载，请稍候”文本没有显示 @B Kirby - user13812143

Answer 2

我已经使用了以下JavaScript事件来在页面加载时显示加载图像:

$(window).on('load', function () {
  $(".loadingDiv-parent").fadeOut("slow");
});
$(window).on('beforeunload', function () {
  $(".loadingDiv-parent").fadeIn(50);
});

CSS显示图片的正确方法：

/*  LOADING SPINNER  */
.loadingDiv-parent {
   position: fixed;
   text-align: center;
   width: 100%;
   height: 100%;
   z-index: 999998;       
}

.loadingDiv {
   position: fixed;
   text-align: center;
   top: 40%;
   left: 45%;
   z-index: 999999;
}

.loadingDiv .loading-image {
   display: block;
   margin: 25px 75px;
}

然后在视图中:

<div class="loadingDiv-parent">
  <div class="loadingDiv">
    <div class="card border-success">
        <div class="card-header">
            <h3 class="panel-title">Loading ... Please Wait</h3>
        </div>
        <div class="card-body">
            <i class="Your_icon loading-image" style="font-size:7em;" aria-hidden="true"></i>
            <span id="panelclose_btn"></span>
        </div>
    </div>
</div>

我使用了Font Awesome图标作为加载旋转器的图片。

- Jaggan_j