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

1

よりスムーズなアニメーションが必要な場合は、おそらく jQuery へのフォールバックで CSS3 トランジションを使用する必要があります。jQuery は JavaScript のパフォーマンスによって制限されますが、CSS3 はコンピューターの GPU を使用して処理を高速化します。これを自動的に行うプラグインがあります。例えばトランジットもその一つです。またはtransition: left 500ms ease、スライド要素を設定し、$.css代わりに を使用して位置を変更することで、手動で行うこともできます$.animate。手動で行う場合は、Modernizrなどを使用して、CSS3 トランジション サポートを検出し、それに応じて切り替えることをお勧めします。

jQuery.fx.intervalを下げてみることもできますが、違いがあるとは思えません。デフォルト値は 13ms で、これは 1 秒あたり約 76 フレームです。スムーズなアニメーションのために十分に高速です。

于 2013-07-10T08:04:28.220 に答える