c# - 中继器获取数据时如何显示“正在加载...”

Question

我在 ASP.NET 页面中有一个数据中继器。它加载了很多东西，显示图像需要 4 - 5 秒。我无法分页或获取需要显示所有数据的项目的一部分，因此我需要加载消息或 gif，但我该怎么做呢？谁能帮我？

谢谢

Answer 1

如果您的方案不是 ajax 之一（经典表单回发或浏览器通过链接单击重定向），我会在重定向/回发之前将动画 gif 插入 html 布局（显示隐藏的 div 或类似的东西）。AFAIK 这种方法会对旧式浏览器产生问题（动画将被冻结）

另一种方法称为页面处理器？. 浏览器被重定向到在加载请求的页面时显示动画的中间页面。

您还可以从服务器 (Response.Write / Response.Flush) 发送 javascript 代码，该代码将为您的当前页面设置动画。

如果服务器响应时间过长，我还建议阻止/隐藏 UI 控件（例如“发送表单”）以拒绝不耐烦的用户单击两次。

Answer 2

使用 iframe。本质上，您可以在 iframe 中打开运行缓慢的页面，并使用 iframe 引发的事件来显示加载图像。

<script type="text/javascript"> 

var t;

//on iframe state change display or hide the loader tag
function readyStateChanged(state)
{
    if (state == 'complete' || state == 4 || state == '4' || state == 'Complete')
    {
        //hide the loader
        document.getElementById('loader').style.display = 'none';
        clearTimeout(t);

    } else
    {
        //diaplay the loader
        document.getElementById('loader').style.display = '';

        //hide the loader if the iframe never loads
        t = setTimeout("hideLoader()", 5000);
    }
}


//hide the loading tag
function hideLoader()
{
    document.getElementById('loader').style.display = 'none';
    clearTimeout(t);
}    
</script>


<div id="loader" style="display: none;"><img />loading...</div>

<iframe id="frameX"  src="your_page.aspx" width="100%" height="400px" onload="hideLoader();" onreadystatechange="readyStateChanged(this.readyState);" ></iframe>