如何使用Razor/C＃中的Url.Action方法加载图像时显示加载微调器？

Question

我目前通过API调用加载图像在我Index.cshtml与此代码：

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

这就要求我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"); 
    } 
} 

为了解释这是怎么回事 - 我打电话给我的API通过RestClient，并看看它是否返回一些东西。如果是这样，我将图像输出到页面，如果没有，我输出404 jpg到页面。

问题是，在Url.Action调用期间（有时需要不止一秒或两秒钟），没有“图像正在加载..”替代。

有没有适当的方法来做到这一点？有没有更好的方法？

Answer 1

我不会直接从调用服务器端加载图像。我将所有图像加载到页面加载时的某个“加载”图像上，并用您的客户端框架创建一些功能，以在您的服务器端调用此操作，并在完成加载的图像之后替换加载的图像客户端收到。