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也许有人甚至会发现为什么第二层和第三层具有相同的滚动速度而定义了不同的速度。

4

3 回答 3

3

我做了一点工作，并想出了这个：http: //jsfiddle.net/amqER/2/

这比原来的工作要快得多（特别是在 Firefox 中，它的性能要好得多，chrome 它仍然很慢）。我还更改了您代码中的一些逻辑，以使其更有意义。

我做过的事情的清单：

缩小你的png

您的 2 个 png 文件超过 2 兆，因此我将它们放入 png 压缩器 ( tinypng ) 中，这大大减小了大小。这有助于加载时间和整体活泼。

尽可能重用价值

left在您的原始代码中，您在代码中多次写入并随后读取 css属性。这样做会使它变慢很多。$.css相反，我保留了一个左属性，并且只有在我绝对需要时才会触摸。同样对于每次更新读取每个元素的宽度。

另外，就像我说的那样，考虑到您要完成的工作，我将您的逻辑修改为（我认为）更有意义。它每次更新都会计算一个新的差异，并尝试据此移动。此外，一旦其中一个图像脱落，它就不会尝试继续移动（如果你一直向右移动，它就会这样做，它看起来真的很奇怪）。你也可以看看这个： http: //jsfiddle.net/amqER/5/，它可能更像你想要的控制方案。

于 2013-02-21T16:35:13.893 回答
1

只是一些快速的性能提示。

尽量不要使用$(this).mousemove保存$(this)到变量中并使用它。

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

尽量避免使用 $.each。这可能是减慢代码速度的部分。您可以用 for 循环替换它，但我建议在这种情况下，一个一个地发送每个元素。

var parallax = function(img){

};

parallax(img1);
parallax(img2);

立即提高您的 jquery 性能

于 2013-02-21T15:22:32.167 回答
1

虽然 Xymotech 的答案确实大大改进了原始发布者的原始代码；我在 Chrome 中的性能几乎没有改善。

在检查页面 FPS 时，此处发布的解决方案在 Retina MacBook Pro 上以 15FPS 运行。

我对代码做了一个非常简单的更改，将其更改为使用translate3d属性而不是left. 现在，它对我来说以 55-60 FPS 的速度运行。我称之为巨大的性能提升。

如果在 Chrome 中打开了“显示绘制矩形”，您将看到之前发布的解决方案是在视差运动时不断绘制对 dom 的更改。使用 translate3d 解决方案，在视差运动的整个过程中，只需进行零绘制。

http://jsfiddle.net/LG47e/

于 2014-03-25T18:48:28.457 回答