Show spinner while waiting for image to appear from action

Question

I have a page in my MVC 3 project that retrieves a report from Reporting Services, the result of which is displayed in:

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

This image is displayed at the bottom of the page. The action returns a FileContentResult and can display for a few seconds.

What I want to do is display the spinner while the image returns. The problem I ran into (and I searched for a ton) is that it is not ajax, not using jQuery, it is just a simple simple URL that the browser uses to retrieve the image.

So the question is, how do I display the spinner while it waits? Is it possible? Or will I have to use jQuery / Ajax to upload the image to another location and then display it?

Answer 1

This is how I do it. I usually add this to my _layout page so that these script and div are loaded on every page of my project. This will make Spinner show anytime there is 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, at any time, ajax makes the user interface wait for the counter to appear.

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

Answer 2

Some time ago I had a similar problem and I wrote a jQuery plugin that automatically processes spinner http://denysonique.github.com/imgPreload/