Question

我遇到一个问题，即在渲染新页面时，屏幕会在重定向上变为白色一毫秒。

这会导致屏幕闪烁并使我烦恼。

我在网上有一点点scoot并且发现这个IE解决方案适用于IE，但它不适用于chrome或FireFox。

<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.0)" />

另外，我确信使用此方法会对更新面板和Ajax控件产生一些影响。

有没有办法设置服务器在呈现整个页面之前给它客户端，所以不要让这个白毫秒适用于所有浏览器。

任何想法都会受到欢迎。

Answer 1

MSDN示例建议设置

Response.BufferOutput

之前打电话

Response.Redirect("http://www.mydomain.com/default.aspx");

您可能还想尝试使用

Server.Transfer("default.aspx", true);

Answer 2

您所看到的是正常现象。以下是重定向期间发生的情况：

服务器向浏览器发送响应（重定向在客户端完成）。
浏览器加载响应，发现存在重定向并停止页面加载
浏览器加载新页面

您使用的元标记仅限IE，不会影响任何其他浏览器。唯一能消除闪烁的因素将是以下之一：

您说当用户点击按钮或网格行或其他内容时会发生重定向。如果这是触发更改到location.href而不是回发，那么用户将看不到浏览器闪烁。
使用Server.Transfer（这将导致浏览器的地址栏显示旧页面而不是新页面（重定向将更改地址栏）。这仅在您重定向用户时才有效到同一台服务器上的页面。
发送HTTP 301响应（永久移动）。 Tis会消除闪烁，但请谨慎使用此方法。它有其他影响（它可能影响搜索引擎排名）。

要做＃3，请在服务器上使用此代码。

Response.StatusCode = 301;
Response.StatusDescription = "Moved Permanently";
Response.AddHeader("Location", "NewLocation.aspx");

Answer 3

有没有办法设置服务器在呈现整个页面之前将其提供给客户端

简短回答：不。这就是网络浏览器的工作方式。

即使使用尽可能快的服务器（使用静态缓存页面进行描述），您只会减少平均“白色”时间，而不是一起消除它们。正如您在IE中看到的那样，默认页面转换是浏览器代码的一部分，而不是服务器端可以控制的内容。如果你自己编写浏览器，你可以把它写成洗黑，洗白或保持转换，直到加载整个页面，就像IE一样。

正如其他人所说，缩小页面大小会减少“白色”时间。这次不仅是服务器生成页面所需的时间，还包括页面，图像，javascripts，css等的所有网络传播时间，这就是为什么你永远无法完全摆脱它 - 只能使用浏览器隐藏它技巧。

我不是在谈论“客户端”的任何事情。这是行不通的。当浏览器决定对画布进行白色清洗时，甚至不会下载“客户端”代码，更不用说运行了。它是每个人都习惯的“互联网”的标准部分;它不是设计成幻灯片放映查看器或图形完美的渲染器。不幸的是，如果你非常关心转换，那么HTML可能不适合你的工作。

Answer 4

默认情况下，服务器将在发送之前缓冲完整的响应。 “白色”将是HTML内容可能与其大小相关的结果。使用诸如firebug或IE Developer Tools之类的工具（我的偏好是Fiddler）来检查生成的内容。猜测你有一些非常大的ViewState。

Answer 5

对不起，我迟到了！我一直在我的应用程序上努力解决这个问题。我设计的解决方案适合我。非常像@Pike65建议......

为叠加层创建一个持有者：

<div id="overlayContent" class="overlay">
    <div id="loaderContent" class="loader">
        Loading...
    </div>
</div>

此持有人的CSS：

.overlay {
    position: fixed;    
    border: 0; margin: 0; padding: 0;
    height: 100%; width: 100%;
    top: 0; left: 0;
    background-color: #272727;
    text-align: center; vertical-align: middle;
    z-index: 900; display: none;
    -moz-opacity: 0.1; opacity: 0.1;
    filter: alpha(opacity=10);
}

.overlay .loader {
    position: relative;
    width:40%;
    margin: 20% auto;
    padding: 10px;
    background-color:black;
    border: solid 1px gray;
    color: #cccccc;
    font-weight: bold;
}

Javascript（jQuery）：

$('a, input[type=button]').live("click", function (e) { 
    $("#overlay").show().css({ opacity: 0.1 }).fadeTo(UxSpeed, 0.8); 
});

就是这样。您可以根据自己的喜好修改'js'。只要有任何链接或按钮被遮挡，它就会出现半透明叠加层。根据浏览器的性质，它将等待它获得新页面（标题）的响应。因此，在为新页面返回至少某些内容之前，它不会消失当前页面。新页面开始显示后，会自动删除叠加层！

Answer 6

可能最好在客户端进行。例如，您可以拥有一个覆盖整个页面的div，并在DOM完全放在一起后淡出。在jQuery中，类似这样：

$(document).ready(function() { $('#overlay').fadeOut(); });

从用户体验的角度来看，虽然可能有点令人不安。我实际上更喜欢闪烁一点，所以我知道事情正在发生。

Response.redirect上的屏幕闪烁

6 个答案: