在等待动作显示图像时显示微调框

Question

我的MVC 3项目中有一个页面，该页面从报表服务中提取报表，其结果显示在：

<img src="@Url.Action("ActionName", "Controller",...etc

此图像显示在页面底部。该操作将返回FileContentResult，并且可能需要几秒钟才能显示。

我要做的是在返回图像时显示微调器。我遇到的问题（并且我已经搜索了很多）是它不是ajax，没有使用JQuery，它实际上只是浏览器用来检索图像的普通旧URL。

所以问题是，如何在等待时显示微调框？这有可能吗？还是我必须使用JQuery / Ajax将图像加载到其他地方然后显示？

Answer 1

这就是我的方法。我通常将其添加到我的_layout页面，以便将该脚本和div加载到项目的每个页面上。这将使Spinner随时显示ajaxSend并隐藏在ajaxStop或ajaxError上。

<script type="text/javascript">
        $(document).ready(function () {
            BindSpinner();
        });

        function BindSpinner() {
            $("#spinner").bind("ajaxSend", function () {
                $(this).show();
            }).bind("ajaxStop", function () {
                $(this).hide();
            }).bind("ajaxError", function () {
                $(this).hide();
            });
        };
    </script>



  <div id="spinner" class="spinner" style="display: none;">
       <img id="img-spinner" src="@Url.Content("~/Content/Images/ajax-loader.gif")" alt="Loading..." />
  </div>

现在，无论何时，ajax都会使UI等待微调器将显示。

在这里可以找到使用ajax调用动作的指南。