0

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

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

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

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

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

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

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

请问有哪位大侠给我点建议吗？非常感激！

4

1 回答 1

0

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

内容.html

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

恢复

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

阅读更多

jQuery.ajax()

笔记

您使用的脚本从 2010 年开始在我的 Intel Core Duo i5 上引起了一些计算，并且不时出现滞后。您可以通过在现代浏览器上使用CSS 过渡来提高整体性能。它将使用更少的 CPU，因为它不需要执行大量的 JavaScript，并且看起来更流畅。

脚本也在使用eval. 阅读这篇文章 为什么使用 JavaScript eval 函数是个坏主意？得到一个想法并尝试重新编写正在使用它的部分。我想它可以很容易地完成（我没有深入研究代码）。

我希望这对您有所帮助，并为您带来一个不错的解决方案。

于 2013-02-03T09:16:38.630 回答