5

我有两个经典的 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。

4

3 回答 3

3

这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>，而是用（例如）一个 CSS 类来装饰它们，比如async-load. 现在在页面的 onload 上将所有hrefs替换为javascript:对应的，如下所示：

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

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

最后不要忘记，这种技术也可以用于片段（例如，如果您提供共享导航栏和当用户单击导航栏链接时替换的内容部分（因此您无需再次加载所有内容） .

于 2012-10-29T13:43:31.953 回答
3

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

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

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

于 2012-10-29T14:02:20.880 回答
1

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

echo '<img src="data:image/png;base64,';
echo base64_encode(file_get_contents($file));
echo '"/>';
于 2014-04-12T13:58:17.777 回答