Comment afficher le spinner de chargement pendant le chargement de l'image avec la méthode Url.Action dans Razor/C#?

Question

Je suis actuellement le chargement d'une image par un appel API dans mon Index.cshtml avec ce code:

<img src="@Url.Action("ImageFromAPI")" width="500px" /> 

Cela appelle mon HomeController.cs:

public ActionResult ImageFromAPI() 
{ 
    var client = new RestClient("http://IP-ADDRESS/snapshot.cgi?channel=0"); 
    var request = new RestRequest(Method.GET); 
    request.AddHeader("cache-control", "no-cache"); 
    request.AddHeader("authorization", "Basic Xwjk15j5oi1gsdg"); 
    IRestResponse response = client.Execute(request); 

    if (response == null) 
    { 
     var ms = new MemoryStream(); 
     using (Bitmap bitmap = new Bitmap("~/img/404.jpg")) 
     { 
      bitmap.Save(ms, ImageFormat.Jpeg); 
     } 

     ms.Position = 0; 
     return File(ms, "image/jpg"); 
    } 
    else 
    { 
     return File(response.RawBytes, "image/png"); 
    } 
} 

Pour expliquer ce qui se passe - j'appelle mon API à travers le RestClient et voir si elle retourne quelque chose. Si c'est le cas, je produis l'image sur la page, sinon, je renvoie le 404 jpg à la page.

Le problème est, au cours de l'appel Url.Action (parfois il faut plus que juste une seconde ou deux), il n'y a pas de substitut "Image charge ..".

Existe-t-il un moyen approprié de le faire? Y a-t-il un meilleur moyen?

Answer 1

Je ne chargerais pas l'image directement à partir d'un appel côté serveur. Je définirais toutes les images en cours de chargement sur une image de chargement lors du chargement de la page et créer des fonctionnalités avec votre infrastructure côté client pour appeler cette action du côté serveur et remplacer l'image de chargement par l'image chargée une fois reçu par le client.