jQuery 动画在 Firefox 中断断续续答案

【问题标题】：jQuery animations are choppy and stutter in FirefoxjQuery 动画在 Firefox 中断断续续
【发布时间】：2011-02-15 05:24:01
【问题描述】：

我喜欢认为我不是一个傻瓜，但我无法让我的 jQuery 水平幻灯片动画流畅地制作动画，尤其是在 FireFox 中（在 Mac 上）。有人给点建议吗？

动画是这样完成的：

$('#lookbook').stop().animate({left: -((lookbook-1)*825)+'px'}, { duration: 800, complete: cap_fade(1)});

示例链接：

http://mayfourteenth.com/w/lookbook?preview=1

【问题讨论】：

标签： javascript jquery firefox jquery-animate slideshow

【解决方案1】：

我已经在 Windows 上的 Firefox、Chrome(dev) 和 Safari 中进行了测试，并且动画在所有浏览器中都卡顿（但在 FF 中更多）。

要提高 JavaScript 性能，您可以摆脱所有 getElementById 或 $("div#mydividentyfier") 调用。如果您将它们存储在变量中，它们将被缓存。例子：这样做可以大大提高性能：

var lookbook = $('#lookbook');
var look_caption = $('#look_caption');
if (lookbook.length) {    
    lookbook.width(lookbook).width()*$('#lookbook img').length)
    if (look_caption) {
        look_caption.html(lookcaps[0]);
        look_caption.fadeIn();
    }

代替：

if ($('#lookbook').length) {    
    $('#lookbook').width($('#lookbook').width()*$('#lookbook img').length)
    if ($('#look_caption')) {
        $('#look_caption').html(lookcaps[0]);
        $('#look_caption').fadeIn();
    }

我还建议对图像使用数据 URI，因为它可以减少加载页面所需的 httpRequest 数量。

【讨论】：

【解决方案2】：

我在 Chrome 中的动画看起来很流畅。不过，我相信您可以做几件事来提高平滑度：

首先，可以像 here（在顶部）一样提前预加载所有图像。但是，像在"Example link" 中那样一次性显示它们会损害性能，因为它们都是同时进行动画处理的：

<div id="lookbook"> 
    <div><img src="/q_images/lib/lookbook/1.jpg"></div> 
    <div><img src="/q_images/lib/lookbook/2.jpg"></div> 
    ...
    <div><img src="/q_images/lib/lookbook/15.jpg"></div> 
</div>

您可以简单地在当前图像的任一侧定位下一张和上一张图像，而不是这样做，但在需要之前不要将其余图像放在页面中。（不过，预加载它们仍然没问题。）

其他可以稍微提高性能的事情如下：

使用更小的（按像素和/或文件大小）图像。
通过提前计算来进行小的代码优化。
使用独立的动画库而不是 jQuery。

【讨论】：

【解决方案3】：

你可能也想用这个

.animate({left:'-=825'}); //next
//and
.animate({left:'+=825'}); //previous

代替

.animate({left: -((lookbook-1)*825)+'px'});

【讨论】：

我很欣赏你的理解，但这打破了“捕捉”。