如何使我的 jQuery 动画更流畅？

Question

我有一个页面：http://staging.similarblue.com/portfolio/

由于某种原因，我无法让动画顺利运行。 YSlow 说“该页面总共有 51 个 HTTP 请求，总重量为 1425.2K 字节，缓存为空。”我的猜测是动画运行缓慢，因为页面上的图像数量众多（因此更多的图像可以在动画上移动）。也可能是因为背景图片。

页面上有很多图片会使动画变慢吗？

大型固定图像背景是否会使动画变慢？

如果你很了解 YSlow 和 Firebug，你能看一下我可以优化的地方吗？

以下是当您单击图像时为下拉菜单设置动画的代码：

$('#client-' + currentClient).slideUp('fast',function() {
  slideItDown(id, function() {
    scrollTo(id);
  });
});

function slideItDown(id, callback) {
  $('#client-' + id).slideDown('fast',callback);
}

function scrollTo(id, callback){
  $('html,body').animate({
      scrollTop: $('#client-thumb-' + id).offset().top + 72
    },'fast','linear',callback);
}

谢谢！

Answer 1

这是我认为的主要问题。在动画期间，整个页面越来越高。这使它看起来有点不稳定——右侧的滚动条正在移动，页面正在向下移动。如果你能消除它，它会有所帮助。 （您可以在底部设置一个白色 div，并使其高度与您打开的 div 一致。或者，它可以在其下方的任何“顶部”打开，而不改变高度。）

至于加快速度，这我还不能说。加快或减慢它们有时会有所帮助，在空间可用后淡化内容也是如此。我认为保持高度不变可能主要是这样做的。

我喜欢整体效果，但它的表现方式却很粗糙。通过控制元素显示时的加载顺序，您可以使整个页面看起来更加流畅。当您预加载图像（Image.new.src='/img.gif'）时，它会阻止其余 JS 运行。这可能看起来很糟糕，但您可以强制图像以正确的顺序加载——因此您可以在页面的其余部分绘制之前加载背景图像，如果您愿意的话。确实，您只需做一点工作就可以为页面的显示设置动画。

祝你好运！

Answer 2

在 Chrome 中对您的页面稍作修改后。看来-webkit-background-size: cover; 是你的问题。移除后，您的动画运行顺畅。

您也可以尝试对动画使用 CSS 过渡。这些是硬件（读取 GPU）加速的，因此动画无论如何都会运行得更流畅。