Question

我有两个经典的HTML页面（只是HTML和CSS）以及它们之间的链接当我点击这些链接时，屏幕会闪烁（在转换之间很快变白）我试着把它放在脑袋里 - 没有结果：

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

我通常可以在没有闪烁的情况下打开其他网站浏览器是Firefox 16.0.1。

Answer 1

只需将您的身体背景更改为：

body {
  background: url("Images/sky01.jpg") repeat scroll 0 0 #121210;
  font-family: Verdana,Geneva,sans-serif;
  font-size: 12px;
  margin: 0;
  padding: 0;
}

背景色可以防止加载背景图像时出现白色闪烁。

Answer 2

meta仅适用于IE，但它们不适用于FF。

您不能依赖普通HTML来防止闪烁。我找到的最佳解决方案是用JavaScript调用替换每个链接，然后用AJAX下载页面，然后用新内容替换文档本身。页面刷新速度非常快，下载时您不会看到任何空白屏幕。

基本功能可能是这样的：

function followLink(pageUrl) 
{ 
    jQuery.ajax({ 
        url: pageUrl, 
        type: "GET", 
        dataType: 'html', 
        success: function(response){ 
            document.getElementsByTagName('html')[0].innerHTML = response
        } 
    }); 
}

然后你必须替换你的链接：

<a href="mypage.html">Link</a>

使用：

<a href="javascript:followLink('mypage.html')">Link</a>

关于此的更多细节：替换整个HTML文档] 1：如何使用jQuery替换HTML文档的内容及其含义（并不总是那么明显）。

<强>改进

使用此解决方案，您可以强制用户使用JavaScript，以防它们无法启用，因此无法点击链接。出于这个原因，我会提供一个后备。首先不要更改<a>，而是使用（例如）像async-load这样的CSS类来装饰它们。现在在页面的onload上用href对象替换所有javascript: s，如下所示：

jQuery().ready(function() {
    jQuery("a.asynch-load").each(function() { 
        this.href = "javascript:followLink(\"" + this.href + "\")";
    });
});

有了这个，您也可以处理加载动画（它的实现方式取决于您使用的是什么以及您的布局）。此外，在同一个地方你可以提供淡入/淡出动画。

最后不要忘记，此技术也可用于片段（例如，如果您提供共享导航栏和内容部分，当用户单击导航栏上的链接时（因此你不会再需要加载所有东西了。）

Answer 3

尝试嵌入图片，因为它会延迟最终页面加载，因此会延迟白色过渡时间

echo '<img src="data:image/png;base64,';
echo base64_encode(file_get_contents($file));
echo '"/>';

如何在没有屏幕闪烁的页面之间浏览？

3 个答案: