如何使用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

我不會直接從調用服務器端加載圖像。我將所有圖像加載到頁面加載時的某個「加載」圖像上，並用您的客戶端框架創建一些功能，以在您的服務器端調用此操作，並在完成加載的圖像之後替換加載的圖像客戶端收到。