Show loader untill not get response from server

Question

I am using HttpHandler in my Asp.Net MVC project, that get the Thumbnail image and load in <img /> tag. The function works properly as needed.

But before server give response I want to show some loading icon/message so user can know that image is still loading.

My Code:

HttpHandler code:

var currentResponse = HttpContext.Current.Response;

string URL = "http://localhost:50417/API/GetThumbnail";
                    HttpWebRequest request = (HttpWebRequest)WebRequest.Create(URL);
                    request.KeepAlive = false;
                    request.ProtocolVersion = HttpVersion.Version10;
                    request.Method = "GET";
                    request.Timeout = 30000;
                    HttpWebResponse response = (HttpWebResponse)request.GetResponse();

                    StreamReader streamr = new StreamReader(response.GetResponseStream());


                    currentResponse.Write(streamr.ReadToEnd());

RouteConfig.cs

routes.Add(new Route("Thumbnail/getImage", new ThumbnailImageRouteHandler()));

index.csHtml

<img src="/Thumbnail/getImage" />

Answer 1

I have use the jQuery function to show loading image gif. Following is a function

$(".thumb-img img").one("load", function () {
        // do stuff
        $(this).removeClass("LoaderImg");
    }).each(function () {
        $(this).addClass("LoaderImg");
        if (this.complete) $(this).load();
    });