CODEWITHSUNDEEP
jqueryajaxasp.net-mvc
Andrew Goodchild
Andrew Goodchild

Reputation: 31

Display spinner while waiting for an image to display from an action

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?

Upvotes: 2

Views: 5122

Answers (2)

denysonique
denysonique

Reputation: 16574

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/

Upvotes: 1

Totero
Totero

Reputation: 2574

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.

Upvotes: 5

Related Questions