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

在Chrome浏览器中摆弄了一些页面。似乎-webkit-background-size: cover;是你的问题。删除后，您的动画将顺利运行。

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

Answer 2

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

至于加快速度，我还说不出来。加速或放慢它们有时会有所帮助，因为在空间可用后内容逐渐消失。我认为不改变的高度可能主要是这样做。

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

祝你好运！

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

2 个答案: