4

こんにちはStackOverflowコミュニティ、

私が達成しようとしているのは、マウスで移動できるヘッダーです。ヘッダーをクリックしてマウスをドラッグすると、ヘッダー内の要素がさまざまな速度で移動します。

パララックス部分は達成しましたが、性能はあまり良くありません。背景をドラッグしている間、部分的に少し遅れています。

私の質問は、パフォーマンスを向上させるためにコードで何を変更できるかということです。

これは、パララックスを処理するコードの一部です。すべてのmousemoveで、各ループが実行されます。これが、パフォーマンスが非常に遅くなる理由だと思います。

var dragging = false;
var clickMouseX;

//Our object for the layers
//each layer has a different scrolling speed
var movingObjects = {
    '#header-l1' : {'speed': 1},
    '#header-l2' : {'speed': 1.4},
    '#header-l3' : {'speed': 1.85},
    '#header-l4' : {'speed': 2.2},
};

$('#header-wrapper').mousedown(function(e){
    dragging = true;

    //Get initial mouse position when clicked
    clickMouseX = e.pageX;

        $(this).mousemove(function(mme){
            //execute only if mousedown
            if(dragging){
                //iterate through all layers which have to be parallaxed
                $.each(movingObjects, function(el, opt){
                    var element = $(el);
                    //get difference of initial mouse position and current mouse position
                    var diff = clickMouseX - mme.pageX;
                    //scroll-position left speed 1
                    if(diff < 0) diff = -1;
                    //scroll position right speed 1
                    if(diff >= 0) diff = 1;
                    //get current position of layer
                    currLeft = parseInt(element.css('left'));
                    //get current layer width
                    elWidth = element.width();

                    //if right border is reached don't scroll further
                    if(currLeft < -(elWidth - 810)){
                        element.css('left', -(elWidth - 810));
                    }           
                    //so do with left border
                    if(currLeft > 0){
                        element.css('left', 0);
                    }
                    //parallax it! Subtract the scroll position speed multiplied by the speed of the desired
                    //layer from the current left property
                    element.css('left', parseInt(element.css('left')) - diff*opt.speed);    
                });
            }
        });


    /* Cursor */
    $(this).css('cursor', 'pointer');
    return false;
});

私もフィドルを上げました：http： //jsfiddle.net/yWGDz/

よろしくお願いします、トーマス

PSおそらく誰かが、レイヤー2と3が同じスクロール速度を持ちながら、異なる速度が定義されている理由を見つけたかもしれません。

4

3 に答える 3

3

私はこれに少し取り組み、これを思いついた：http: //jsfiddle.net/amqER/2/

これはオリジナルよりもはるかに高速に動作します（特にFirefoxでは、パフォーマンスが大幅に向上しますが、Chromeではまだかなり遅いです）。また、コードのロジックの一部を変更して、わかりやすくしました。

私がしたことのリスト：

pngを縮小する

2つのpngファイルが2メガを超えていたので、それらをpngコンプレッサー（tinypng）に入れて、サイズを大幅に縮小しました。これは、読み込み時間と全体的なスナップ性に役立ちます。

値を可能な限り再利用する

left元のコードでは、コード内のcssプロパティに数回書き込み、その後読み取りました。これを行うと、処理速度が大幅に低下します。$.css代わりに、私は左の財産を保持し、絶対に必要なときにだけ触れました。同様に、各要素の幅を読み取るために、更新ごとに。

また、私が言ったように、あなたが達成しようとしていたことを考えると、私はあなたのロジックを（私が思うに）より意味のあるものに変更しました。更新ごとに新しい差分を計算し、それに応じて移動しようとします。また、画像の1つが落ちても、動き続けようとはしません（右端まで動かすと、動き続けますが、非常に奇妙に見えます）。これも見ることができます：http：//jsfiddle.net/amqER/5/、これはおそらくあなたが望んでいた制御スキームに似ています。

于 2013-02-21T16:35:13.893 に答える
1

パフォーマンスに関する簡単なヒント。

代わりに変数$(this).mousemoveに保存して使用しないようにしてください。$(this)

var th = $(this);
th.mousemove...

$.eachの使用は避けてください。これはおそらくあなたのコードを遅くしている部分です。forループに置き換えることもできますが、この場合は、各要素を1つずつ送信することをお勧めします。

var parallax = function(img){

};

parallax(img1);
parallax(img2);

jqueryのパフォーマンスを即座に向上

于 2013-02-21T15:22:32.167 に答える
1

Xymostechの回答は、元の投稿者の元のコードを大幅に改善しています。Chromeではパフォーマンスはほとんど向上しません。

ページFPSを調べている間、ここに投稿されたソリューションは、RetinaMacBookProで15FPSで実行されます。

コードに非常に簡単な変更を加え、のtranslate3d代わりにプロパティを使用するように変更しましたleft。今では、55〜60FPSで動作します。私はそれを大幅なパフォーマンスの向上と呼んでいます。

Chromeで[長方形のペイントを表示]がオンになっている場合、視差が動いている間、以前に投稿されたソリューションが継続的にdomに変更をペイントしていることがわかります。translate3dソリューションを使用すると、視差が動いている間、ペイントはまったく行われません。

http://jsfiddle.net/LG47e/

于 2014-03-25T18:48:28.457 に答える