如何在ajax中调用方法并在浏览器中显示更新进程映像

Question

我从服务器获取图像，此时我需要显示进度图像而不是在浏览器中显示空白页面。我正在使用Ajax调用方法来显示进程映像，我如何在这部分中使用这个Ajax调用方法请帮忙

<asp:UpdateProgress runat="server" id="PageUpdateProgress">
            <ProgressTemplate>
                <img alt="ajax-progress" src="http://localhost:49505/image/ajax-progress.gif"></img>
            </ProgressTemplate>
        </asp:UpdateProgress>

            <img class = "hidden" id="orginal" alt = "Goofy pic of me" runat="server"  />

        </div>
        <div id="content" style="width:1000px; height:500px; overflow:scroll;">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>

            <canvas id = "drawing" height="1500" width="1200" >  
                 <p>Canvas not supported</p>
            </canvas>  </ContentTemplate>

        </asp:UpdatePanel>


    <div>
 <asp:Button id="btnChangeImage" runat="server" Text="ChangeImage" OnClick="btnChangeImage_Click" />

</div>

但是在这组代码中，我没有得到进度图像，请帮助我完成此过程。

在asp.cs页面中

 protected void btnChangeImage_Click(object sender, EventArgs e)
        {
           System.Threading.Thread.Sleep(5000);
            var fileData =  Convert.ToBase64String(file.Content);
            this.orginal.Src = "data:image/gif;base64," + fileData;
}