显示微调，同时等待图像显示来自一个动作 [英] Display spinner while waiting for an image to display from an action

问题描述

我有一个网页在我的MVC 3项目，拉动了一份报告，从报告服务，其结果显示在：

I have a page in my MVC 3 project that pulls a report from reporting services, the result of which is displayed in an :

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

此图像被呈现在页面的底部。该行动将返回FileContentResult，并可能需要几秒钟显示。

This image is rendered at the bottom of the page. The Action returns a FileContentResult and can take a few seconds to display.

我想要做的是显示一个微调，而被返回的图像。我已经（和我已经搜查一吨左右，这一点）的问题在于，它不是阿贾克斯，不使用JQuery，那就是浏览器用来检索图像只是有效的一个普通旧的URL。

What I want to do is display a spinner whilst the image is being returned. The problem I have (and I've searched a ton about this) is that it's not ajax, not using JQuery, it's just effectively a plain old URL that the browser uses to retrieve the image.

所以，问题是，我怎么显示一个微调，而它的等待？这甚至可能吗？或者将我必须使用JQuery / Ajax来加载图像别的地方，然后显示它？

So the question is, how do I display a spinner whilst it's waiting? Is this even possible? Or will I have to use JQuery/Ajax to load the image somewhere else and then display it?

推荐答案

这是我要做的事。我通常加入到我的_layout页面，让这个脚本和DIV是我的项目的每个网页上加载。这将导致微调显示出任何时候有一个ajaxSend和隐藏ajaxStop或ajaxError。

This is how I do it. I normally add this to my _layout page so that this script and div are loaded on every page of my project. This will cause the Spinner to show any time there is a ajaxSend and hide on ajaxStop or 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等待的微调将被显示。

Now anytime ajax causes the UI to wait the spinner will be shown.

一个指南要求使用AJ​​AX的动作可以发现的这里

A guide to calling an action using ajax can be found here.

这篇关于显示微调，同时等待图像显示来自一个动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！