Question

我最近的任务是创建一个HTML驱动的网页，它将模拟基本的Flash过渡和动画，这让我自然而然地转向了jquery。该网站有四个不同的页面，每个页面都有其特定的背景和一小段文字。

容易吗？显然对我不是这样。当我获得批准的交互式模拟运行时，我遇到了一个缓慢的动画问题，仅针对（惊喜，惊喜）Mac以及18英寸以上的显示器。我运行测试的PC在所有主流浏览器上运行良好 - Chrome， IE9和FF。对于18英寸以上的Mac，然而，FF是最好的，而其余的则很糟糕。

我已经尝试了优化jquery代码的方法和方法，甚至使用index.html页面将所有图像预加载到浏览器缓存中，然后将用户重定向到实际的网页，希望可以减少对处理时间的压力。

不幸的是，没有任何效果。

这是一个单页设置，因此可能是导致迟缓的主要因素之一，但它并不能解释为什么它在PC和18英寸以下的Mac上工作正常。

在任何情况下，这里都是我的代码片段，动画可以在加载时淡入元素并在页面/部分之间传输：

$(document).ready(function(){

$("#home-button").click(function(){
    $("#home").fadeTo(2000, 1);
    $("#location").fadeTo(2000, 0);
    $("#services").fadeTo(2000, 0);
    $("#contact").fadeTo(2000, 0);
    $("#bg-img-1").fadeTo(2000, 0);
    $("#bg-img-2").fadeTo(2000, 0);
    $("#bg-img-3").fadeTo(2000, 0);
    $("#bg-img-4").fadeTo(2000, 1);});

$("#location-button").click(function(){
    $("#home").fadeTo(2000, 0);
    $("#location").fadeTo(2000, 1);
    $("#services").fadeTo(2000, 0);
    $("#contact").fadeTo(2000, 0);
    $("#bg-img-1").fadeTo(2000, 0);
    $("#bg-img-2").fadeTo(2000, 1);
    $("#bg-img-3").fadeTo(2000, 0);
    $("#bg-img-4").fadeTo(2000, 0);});

$("#services-button").click(function(){
    $("#home").fadeTo(2000, 0);
    $("#location").fadeTo(2000, 0);
    $("#services").fadeTo(2000, 1);
    $("#contact").fadeTo(2000, 0);
    $("#bg-img-1").fadeTo(2000, 0);
    $("#bg-img-2").fadeTo(2000, 0);
    $("#bg-img-3").fadeTo(2000, 1);
    $("#bg-img-4").fadeTo(2000, 0);});

$("#contact-button").click(function(){
    $("#home").fadeTo(2000, 0);
    $("#location").fadeTo(2000, 0);
    $("#services").fadeTo(2000, 0);
    $("#contact").fadeTo(2000, 1);
    $("#bg-img-1").fadeTo(2000, 1);
    $("#bg-img-2").fadeTo(2000, 0);
    $("#bg-img-3").fadeTo(2000, 0);
    $("#bg-img-4").fadeTo(2000, 0);});});

以下是我的背景图片的CSS样式和一些必须根据浏览器大小调整大小和裁剪的图形元素：

img.bg{
    min-height: 100%;
    min-width: 900px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index:-4;}

#bg-img-1,#bg-img-2, #bg-img-3, #bg-img-4{
opacity:0;}

img.d-4{
min-height: 100%;
min-width: 1024px;
width: 92%;
height: auto;
position: fixed;
top:0;
left:0;
z-index:-3;
opacity:0.3;}

img.d-5{
min-height: 100%;
min-width: 1024px;
width: 92%;
height: auto;
position: fixed;
margin-left:-50px;
z-index:-3;}

非常感谢任何有关如何进一步优化和防止缓慢问题的帮助或意见。

谢谢你们！：）

Answer 1

嗯，你不能做很多事情来优化动画过程本身（除非你想修改jQuery本身）。你可以做的是最小化你的jQuery构造函数调用：

$("#home-button").click(function(){
    $("#homem, #bg-img-4").fadeTo(2000, 1);
    $("#location, #services, #contact, #bg-img-1, #bg-img-2, #bg-img-3").fadeTo(2000, 0);
});

但是，这对动画本身没有影响。确保您使用的是最新版本的jQuery，以便它可以调用requestAnimationFrame，这可能会解决您的一些问题。

如果这对于更流畅的动画没有帮助，您可能会在序列中设置动画，这会占用处理时间。可能看起来像：

$("#home-button").click(function(){
  (function _loop( nodelist ) {
      $( nodelist.shift() ).fadeTo( 2000, 0, function() {
          _loop( nodelist );
      });
  }( ["#location", "#services", "#contact", "#bg-img-1", "#bg-img-2", "#bg-img-3"] ));
});

示例：http://jsfiddle.net/FEYMQ/

Answer 2

此优化将创建更少的jQuery对象，因此应该看到性能提升，我不确定，但将所有动画放在一个函数调用中也可能会在动画中看到性能提升。

$("#contact-button").click(function(){
    $("#home, #location, #services, #bg-img-2, #bg-img-3,#bg-img-4").fadeTo(2000, 0);
    $("#contact, #bg-img-1").fadeTo(2000, 1);
});

Answer 3

感谢jAndy和Billy Moon的建议。这些都是一些很好的做法，我在制作代码时无意中没有遵守这些做法。

现在所有浏览器的页面转换都很好，因为只有在严格的审查下才能观察到迟缓;在肉眼看来，它或多或少是可以接受的。

我认为我需要首先向所有人道歉，因为我遗漏了一个非常重要的代码片段，我意识到这会导致大部分问题。这里最大的问题是，当我有两个带有ID的图形时 - ＃md4和#md5 - 从左侧滑入并逐渐淡入，它开始变得非常生涩。动画只发生一次：进入主页后。动画的jquery：

$(document).ready(function(){
$('#md4').fadeTo(2000, 1);
$('#md5').animate({left: "50px" }, 1800);
$('.home').fadeTo(2000, 0.8);
$('#bg-img-4').fadeTo(900, 1);
$('#menu').fadeTo(2000, 1);
$('#copyright').fadeTo(2000, 1);});

另请注意，使用ID＃md4和＃md5提到的两个图形的样式适合，裁剪和拉伸与浏览器大小成比例。以下是我之前提供的代码，但想再次嵌入，以免我们感到困惑：

#md4, #md5{
min-height: 100%;
min-width: 1024px;
width: 92%;
height: auto;
position: fixed;
top:0;
left:0;
z-index:-3;
opacity:0.3;}

如前所述，我试图通过创建一个index.html页面来解决这个问题，该页面在进入主页并加载所有jquery动画之前将所有图像加载到缓存中。从理论上讲，处理负载需要相当多，但是屏幕高于18英寸的Mac的性能仍然非常低，无论浏览器如何，但FF版本4是最好的。问题也是发生在18英寸以下的Mac屏幕上，但仅限于FF版本4及以下版本。

我已经玩弄了将动画排序连续发生而不是同时发生的想法，但我有点犹豫，因为我担心我会对一下发生的所有事情的预期影响做出太多妥协。表现助推器。对此的一些建议也将非常感激。

所以这里最大的问题是：考虑到所有声明的参数（图片和div在页面加载的同时逐渐消失），我可以做什么来优化所有最新主流浏览器和屏幕大小的动画这将是最小的迟缓。

非常感谢你们。欣赏到目前为止所提供的所有帮助。

优化单页网站的Jquery动画

3 个答案: