Question

在这里使用这个jquery脚本摆弄小时：

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

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

使用两个.png图像并将css的背景颜色设置为透明，并另外添加了一个fadeIn效果。

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

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

此外，我想知道，是否有可能在每次页面加载时不需要加载脚本，即在页面切换时脚本应该继续运行？

那里有人对我有任何建议，拜托？非常感谢！

Answer 1

我创建了一个带有一些链接的本地副本，可以看到你的情况。在页面重新加载或调用另一个链接时，它会立即刷新内容。这发生在我的计算机上的每个浏览器中。我在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>

<强>恢复

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

了解更多

jQuery.ajax()

注意

您使用的脚本在2010年引起了我的英特尔酷睿i5 i5的计算，并且不时落后。您可以在现代浏览器上使用CSS transitions来提高整体性能。它将使用更少的CPU，因为它不必执行大量的JavaScript并且看起来更平滑。

此脚本也在使用eval。阅读此Why is using the JavaScript eval function a bad idea?以获得一个想法并尝试重新编写正在使用它的部分。我想它可以轻松完成（我没有深入研究代码）。

我希望这对您有所帮助，并为您提供一个很好的解决方案。

白色背景闪烁

1 个答案: