在Firefox中,jQuery动画不稳定且断断续续

Question

我喜欢认为我不是假人,但我不能让我的jQuery水平幻灯片动画能够流畅地制作动画,特别是在FireFox(在Mac上).有人有建议吗？

动画正在这样做:

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

示例链接:

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

Answer 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,因为它减少了为加载页面而必须进行的httpRequests数量.

Answer 2

Chrome 中的动画对我来说看起来很流畅。不过，我相信您可以采取以下几项措施来提高流畅度：

首先，可以像此处（顶部）一样提前预加载所有图像。然而，一次性显示它们（如“示例链接”中所示）会损害性能，因为它们同时显示动画：

<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> 

您可以简单地在当前图像的两侧插入下一个和上一个图像，而不是这样做，但然后在需要之前不要在页面中显示其余图像。（不过预加载它们仍然没问题。）

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

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