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

Question

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

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

此图像呈现在页面底部。 该操作返回文件内容结果，可能需要几秒钟才能显示。

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

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

Answer 1

这就是我的做法。我通常将其添加到我的_layout页面，以便将此脚本和div 加载到项目的每个页面上。这将导致微调器在 ajaxStop 或 ajaxError 上显示 ajaxSend 和隐藏。

<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 调用操作的指南。

Answer 2

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