2

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

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

此图像呈现在页面底部。Action 返回一个 FileContentResult 并且可能需要几秒钟才能显示出来。

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

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

4

2 回答 2

5

我就是这样做的。我通常将它添加到我的 _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 调用操作的指南。

于 2012-05-24T08:43:50.653 回答
1

前段时间我遇到了类似的问题，我写了一个 jQuery 插件来处理自动显示微调器http://denysonique.github.com/imgPreload/

于 2012-11-24T06:16:31.680 回答