Question

我有一个简单的javascript库，当我有超过3或4个图像时，它表现得很慢。不要混淆，我不是说它会慢慢地进入下一个图像，我的意思是它的锯齿状并且在进入下一个图像时不平滑。有没有办法让代码更优化更顺畅？或者javascript中更好的功能更快？我不知道该寻找什么，因为我刚刚开始研究javascript。

我已经将所有图片压缩到每个不到300kb。代码如下，javascript和html

//javascript
<script>
function slideSwitch() {
    var r = Math.floor(Math.random() * 41) - 25;

    var active = $("div#slideshow img.active");
    active.siblings().css({'z-index': 97});
    active.next().css({
        'z-index': 98,
        '-moz-transform': 'rotate(0deg)',
        '-webkit-transform': 'rotate(0deg)',
        'transform': 'rotate(0deg)'
    });
    active.css({ 'z-index': 99 });
    if(active.hasClass('last')){
        active.siblings(":first").css({ 'z-index': 98,
        '-moz-transform': 'rotate(0deg)',
        '-webkit-transform': 'rotate(0deg)',
        'transform': 'rotate(0deg)' });
    }


    active.animate({ "left": (350+600) }, 250).css({
        '-moz-transform': 'rotate(' + r + 'deg)',
        '-webkit-transform': 'rotate(' + r + 'deg)',
        'transform': 'rotate(' + r + 'deg)'
    });

    setTimeout(function () {
        active.css({ 'z-index': 97 });
        active.removeClass('active');
        if (active.hasClass("last")) {
            active.siblings(":first").addClass('active');
        } else {
            active.next().addClass('active');
        }
        active.animate({ "left": 350 }, 150);
    }, 250);
}

$(function () {
    setInterval("slideSwitch()", 1000);
});

<!--HTML-->
<div id="slideshow">
    <img src="picture/img1.jpg" style="position:absolute;" class="active" />
    <img src="picture/img2.jpg" style="position:absolute;" />
    <img src="picture/img3.jpg" style="position:absolute;" />
    <img src="picture/img4.jpg" style="position:absolute;" />
    <img src="picture/img5.jpg" style="position:absolute;" />
    <img src="picture/img6.jpg" style="position:absolute;" />
    <img src="picture/img7.jpg" style="position:absolute;" />
    <img src="picture/img8.jpg" style="position:absolute;" />
    <img src="picture/img9.jpg" style="position:absolute;" />
    <img src="picture/img10.jpg" style="position:absolute;" />
    <img src="picture/img11.jpg" style="position:absolute;" />
    <img src="picture/img12.jpg" style="position:absolute;" class="last"/>
</div>

谢谢大家。

Answer 1

@Both伙计们要求我的选择器（在问题评论中）：请注意，jquery选择器引擎（sizzle）从右到左读取选择器。所以在原始选择器（"div#slideshow img.active"）中，它会查找具有类.active的所有元素，然后继续使用img标记。比继续寻找id，必须是div。请查看此 jsperf ，了解选择div.foobar与.foobar的效果差异。
我提供的选择器首先获取id，这是在jquery中选择DOM元素的最快方法。然后它查找id的子元素，它们具有.active类。请注意，选择器会$('.foobar', '#id')，不 $('.foobar, #id')会看到差异。 jquery documentation 中有一些信息。

Answer 2

如果你想要更流畅的动画，你可能需要使用带有回退的CSS3过渡到jQuery。 jQuery受javascript性能的限制，而CSS3使用计算机GPU来加快速度。有插件可以自动为您执行此操作。例如Transit就是其中之一。或者，您可以通过在幻灯片元素上设置transition: left 500ms ease，然后使用$.css而不是$.animate更改位置来手动执行此操作。如果您手动执行此操作，您可能希望使用类似Modernizr的内容来检测CSS3转换支持并相应地进行切换。

你也可以尝试降低jQuery.fx.interval但我怀疑它会有所作为。默认值为13毫秒，大约每秒76帧。快速平滑的动画。

Answer 3

现在可能没有找到答案，但jQuery动画一般来说有点慢（与其他解决方案相比）。在一个项目中，我用gsap为我的动画做过实验。它似乎运行得更顺畅，语法很容易学习。重写动画只花了我大约半个小时，但我知道如果你不喜欢它，不过它可能会在将来考虑。

GSAP

PS。我不推荐使用jquery插件

Answer 4

使用jQuery没有意义。您正在为CSS变换设置动画，这意味着浏览器已经支持CSS动画和过渡。使用它们，你的动画将很流畅。如果您希望通过Javascript执行此操作，请不要使用setTimeout，而是使用requestAnimationFrame。

加快javascript库

4 个答案: