How to show loading text and/or graphic while waiting for chart image ActionResult to return chart?

Question

I have the following View:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    ViewBag.Title = "CreatedIndicator";
}

<h2>Created Indicator</h2>

<img src="@Url.Action("MyChart")" alt="SimpleChart" />

in which the image is created with a MyChart ActionResult which returns a System.Web.Helpers chart:

// Chart data setting from SQL getting
.GetBytes("png");
return File(testChart, "image/png");

Because of all the queries going on in the background to build the chart, there are cases where it can take 5+ seconds for the image to appear on the page after the rest of the page has loaded.

I was wondering if it would be possible to show some sort of UI to indicate the chart is being built until it loads, and if so, how to do it.

Answer 1

HTML img标签具有onload事件，可以处理该事件以隐藏等待的文本/图形。