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

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

来源

2012-10-29 Alegro

只是建议，定身的背景颜色为您的网站的主要背景色。可能你的主要背景不是白色。 – Reflective

@反射，我做了，点击两次后没有闪烁 - 闪烁再次开始。 – Alegro

你能提供一个链接到你的网站，看看到底发生了什么？ – Reflective

只要改变你的身体背景：

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-29 14:02:20 Reflective

反光，它的作品。解决了。非常感谢。 – Alegro

AJAX是有史以来为web所做的最好的想法，但它不值得重写整个网站，以避免闪烁。祝你好运。 – Reflective

我可以证明这一点。那么你最终只能打开一整罐蠕虫。 – Vincent

meta仅适用于IE浏览器，它们不适用于FF。

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

基本功能可能是这样的：

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：如何用jQuer替换HTML文档的内容y及其含义（并不总是那么明显）。

改进

有了这个解决方案，您强制用户使用JavaScript，如果它不能使他们无法点击的链接。出于这个原因，我会提供一个后备。首先不要更改<a>，而是使用（例如）像async-load这样的CSS类来装饰它们。现在，在页面的onload他们javascript:对口，像这样全部更换href S：

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

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

最后不要忘记，这种技术也可以用于碎片（例如，如果您提供共享导航栏和内容部分替换为当用户点击链接导航栏时（所以你不会需要重新加载一切）

来源

2012-10-29 13:43:31

Google索引怎么样？不知道谷歌机器人的威胁JavaScript的东西不仅仅是一个文本。其实谷歌执行一些AJAX和Javascript ......但它不断在发展。 MSN？雅虎？ – Reflective

@反思，Google索引是什么？我以前用css和javascript创建了很多html页面，没有闪烁。 – Alegro

@Reflective在“改进”部分我建议改变以避免这些“问题”（并且在JavaScript未启用时让网站工作）。 –

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

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

来源

2014-04-12 13:58:17 underscore

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

回答

相关问题