白色背景闪烁

摆弄因为小时，这个jQuery脚本位置：白色背景闪烁

http://www.graphicbeacon.com/web-design-development/how-to-create-a-background-scrolling-effect-with-jquery/

为了因为我用它作为背景图像效果摆脱页面加载之间出现的图像的白色背景的网站。

使用两个.png图像并使用css将背景颜色设置为透明，并添加了淡入效果。

在FF和Opera中，我看不到闪烁，但在IE，Chrome和Safari之间切换页面时。

我确定这里有一个（可能很简单）的解决方案，但我只是无法找到它或自己弄明白。

此外，我想知道，是否有可能不需要在每个页面加载时加载脚本，即脚本在页面之间切换时应该保持运行状态？

有没有人对我有任何建议？非常感激！

来源

2013-02-01 Manga

你能提供一个jsfiddle的测试用例吗？ – insertusernamehere

@insertusernamehere这里你去[jsfiddle测试用例]（http://jsfiddle.net/DdtSa/） – Manga

我创建了一个带有一些链接的本地副本，可以看到你的mea。在页面重新加载或调用另一个链接时，它很快刷新内容。这发生在我的电脑上每个浏览器。我在Safari 6，Chrome 24和Firefox 18中对它进行了测试。这是您无法解决的问题，因为内容是每次都新呈现的内容。但是你要解决这个问题，关于如何在每次页面加载时不重新启动动画。

当您希望动画继续运行并且您想要切换页面的内容时，请使用AJAX。通过AJAX，您可以发送请求并获得响应，而无需刷新整个页面。一个例子：

HML

<!-- div that holds the content - use this in addition to your background divs --> 
<div id="content"></div>

的JavaScript

$.ajax({ 
    // the page with the content, you could use a HTML file for every section on your page 
    url: "content.html", 
    cache: false 
}).done(function(html) { 
     // .done() handles the response, this time we replace the content of our div 
     $("#content").html(html); 
});

content.html

<!-- can be any valid HTML and JavaScript --> 
<p>Hey, this is nice</p>

Resumé

使用此动画将继续运行，重新呈现页面时不会闪烁，并且可以加载所需的所有内容。

jQuery.ajax()

注意

您正在使用的脚本造成了一定的计算在我的Intel酷睿i5的2010年，它是由时间滞后时间。在现代浏览器上使用CSS transitions可以提高整体性能。它将使用更少的CPU，因为它不需要执行大量的JavaScript并且看起来更流畅。

此外，脚本使用eval。阅读Why is using the JavaScript eval function a bad idea?以了解想法并尝试重新编写使用它的部分。我想这可以轻松完成（我没有深入了解代码）。

我希望这可以帮助你，并在你身边得到一个很好的解决方案。

来源

2013-02-03 09:16:38 insertusernamehere

白色背景闪烁

回答

相关问题