jQuery 动画在 Firefox 中断断续续

Posted 2023-05-08

【中文标题】jQuery 动画在 Firefox 中断断续续

【英文标题】：jQuery animations are choppy and stutter in 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

【参考方案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');

【讨论】：

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