Question

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

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

此图像显示在页面底部。 Action返回一个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调用操作的指南here.

Answer 2

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

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

2 个答案: