2

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

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

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.

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?

Andrew Goodchild
  • 31
  • 1
  • 3

2 Answers2

5

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>

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

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

Totero
  • 2,524
  • 20
  • 34
  • 1
    really great way to add the waiting scenario in ajax calls before this I uses callbacks for every ajax call, you really open my eyes also the way to write call backs is really cumbersome.. this is great +1 for you and thanks a lot.................. :D – Ankur Verma May 24 '12 at 08:54
  • Thanks Totero - looks like a really neat way of doing it. I guess that means there's no way of doing it without using Ajax though? As I'm not using any form of ajax at the moment... – Andrew Goodchild May 24 '12 at 10:07
  • I don't think so because you are making a synchronous request it won't be able to display a spinner in the way I think you intend. Ajax is asynchronous so it can. Why not use an ajax request? – Totero May 24 '12 at 10:31
  • Your right - I think I need to just to an ajax request. I was doing it that way for simplicity's sake - the img tag only needs it's src to be the action, nice and simple and it just works, but it does mean there's a delay before showing the image and that delay is a bit rubbish from the UI perspective! Thanks for your responses :) – Andrew Goodchild May 24 '12 at 12:04
  • AWESOME ANSWER DUDE - DA BOMB – Dave Lawrence May 24 '12 at 15:18
1

Some time ago I had a similar problem and I have written a jQuery plugin which handles displaying a spinner automatically http://denysonique.github.com/imgPreload/

denysonique
  • 16,235
  • 6
  • 37
  • 40