0

ウィンドウのスクロールに対して要素の背景位置を遅くするために使用している視差スクリプトがあります。私のMacbook Proでは素晴らしいパフォーマンスを発揮しますが、遅いコンピューターでは必要以上に震えます.

以下にコードを示します。

    var bgobj = $('.paral');

    $(window).scroll(function () {

        onScroll(bgobj);

    });

function onScroll(bgobj) {

    var $window = $(window);

    var yPos = ($window.scrollTop() / bgobj.data('speed'));
    // Put together our final background position
    var coords = yPos + 'px';

    // Move the background
    bgobj.css({ backgroundPositionY: coords });

}

私の質問は、下位のマシンで速度を向上させるためにコードをどのように最適化できるかということです。

ありがとうございました

4

2 に答える 2

1

スロットリングを検討しましたか？

http://underscorejs.org/#throttle

http://underscorejs.org/#debounce

var bgobj = $('.paral');

var onScrollThrottled = _.throttle(onScroll, 100);

$(window).scroll(function () {

    onScrollThrottled(bgobj);

});

function onScroll(bgobj) {

    var $window = $(window);

     var yPos = ($window.scrollTop() / bgobj.data('speed'));
     // Put together our final background position
     var coords = yPos + 'px';

     // Move the background
     bgobj.css({ backgroundPositionY: coords });

     if (isScrolledIntoView($('#more-info'))) {

         animateCircle();

     }
}

もちろん、onScroll 関数全体を調整/デバウンスする代わりに、最適化を animateCirle に適用したり、バックグラウンド css を更新したりできます。

于 2013-10-01T10:32:21.617 に答える
0

いくつかの小さな改善が行われることがわかります。大したことはありません:

//cache $window and speed

var $window = $(window);
var bgobj = $('.paral');
var speed = bgobj.data('speed')

$window.scroll(function () {
    onScroll(bgobj);
});

function onScroll(bgobj) {



var yPos = ($window.scrollTop() / speed);
// Put together our final background position
//var coords = yPos + 'px'; // this is not needad as jQuery defaults to pixels if nothing is specified

// Move the background
bgobj.css({ backgroundPositionY: coords });

if (isScrolledIntoView($('#more-info'))) { // depending on what is inside this function, this might slow everything doen

    animateCircle();

}
于 2013-10-01T10:06:21.680 に答える