0

我有一个简单的 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>

谢谢大家。

4

4 回答 4

3

@两个人都在询问我的选择器（在问题评论中）：请注意，jquery 选择器引擎（嘶嘶声）从右到左读取选择器。所以在原始选择器 ( "div#slideshow img.active") 中，它会查找所有带有 class 的元素.active，然后继续查找那些是img标签的元素。而不是继续寻找id，它必须是一个div。查看此内容jsperf以了解选择div.foobar与. 的性能差异.foobar。
我提供的选择器首先获取 id，这是在 jquery 中选择 DOM 元素的最快方式。然后它查找具有.active类的 id 的子元素。请注意，选择器是$('.foobar', '#id')，看 $('.foobar, #id')不到区别。里面有这方面的一些信息jquery documentation。

于 2013-07-10T07:38:45.603 回答
1

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

您也可以尝试降低jQuery.fx.interval虽然我怀疑它会有所作为。默认值为 13 毫秒，大约为每秒 76 帧。流畅的动画速度非常快。

于 2013-07-10T08:04:28.220 回答
1

它可能不是您现在正在寻找的答案，但 jQuery animate 通常有点慢（与其他解决方案相比）。在一个项目中，我为我的动画尝试了 gsap。它似乎工作起来更顺畅，语法也很容易学习。重写动画只花了我大约半个小时，但如果你不喜欢，我理解，但将来可能会考虑。

GSAP

附言。我不会推荐 jquery 插件

于 2013-07-10T08:13:53.053 回答
0

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

于 2013-07-10T09:36:57.113 回答