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

Question

我目前正在 Index.cshtml 中通过 API 调用加载图像，代码如下：

<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");
    }
}

为了解释发生了什么事 - 我正在通过 RestClient 呼叫我的 API 并查看它是否 returns 有什么。如果是，我将图像输出到页面，如果不是，我将 404 jpg 输出到页面。

问题是，在 Url.Action 调用期间（有时需要一两秒以上），没有 "Image is loading.." 替代。

有没有正确的方法来做到这一点？ Any/or有没有更好的方法？

Answer 1

我不会直接从对服务器端的调用加载图像。我会在页面加载时将所有正在加载的图像设置为某些 "loading" 图像，并使用您的客户端框架创建一些功能以在您的服务器端调用此操作，并在加载图像后用完全加载的图像替换加载图像客户端已收到

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

How to display loading spinner during image load with Url.Action Method in Razor/C#?

c#

asp.net-mvc

image-manipulation

image-processing

razor