背景图像全景

Question

我有一个关于滚动背景图像的问题，它会无休止地自我重复。我遇到的问题是，它开始得很快，但很快就变得越来越慢(卡顿等)。代码如下：

var panoramaTimeOutId = null;
var panoramaPosition = null;
$('.panorama-left').mousedown(function() {
    panoramaTimeOutId = setInterval(function(){
        panoramaMove(8, 1)
    }, 50);
}).bind('mouseup mouseleave', function() {
       clearInterval(panoramaTimeOutId);
});
$('.panorama-right').mousedown(function() {
    panoramaTimeOutId = setInterval(function(){
        panoramaMove(8, 2)
    }, 50);
}).bind('mouseup mouseleave', function() {
        clearInterval(panoramaTimeOutId);
});
function panoramaMove(amount, direction)
{
    var panorama = document.getElementsByClassName('panorama_foto')[0];
    if(panoramaPosition == null)
    {
        panoramaPosition = panorama.style.backgroundPosition;
        panoramaPosition = parseInt(panoramaPosition[0].replace("px",""));
    }
    if(direction == 1)
    {
        panoramaPosition = panoramaPosition + amount;
        panorama.style.backgroundPosition = panoramaPosition+"px";
    }
    else
    {
        panoramaPosition = panoramaPosition - amount;
        panorama.style.backgroundPosition = panoramaPosition+"px";
    }
}

我已经尝试了一些optimization.Like用标准javascript编写函数的方法。在通过一个只包含简单整数的变量递增panoramaPosition之前，只计算一次。然而，它仍然断断续续。

我还试着改变间隔时间和px的大小，但在某些电脑上仍然卡顿。例如，该网站是为平板电脑设计的，它在我没有编程的pc上卡顿。而且它必须在平板电脑上正常工作。

下面是一个JSbin示例：http://jsbin.com/upociv/1/edit

希望有人能给出关于如何优化这一点的提示，或者给出我如何改进它的一般建议。

快速说明:必须支持Ipad (1/2/3)，所有galaxy平板电脑和ie，8+，火狐，chrome等。

Answer 1

尝试按panoramaPosition % (image width)移动panoramaPosition，而不是按不断增加的像素数移动它。

这样，您就不会让浏览器尝试以不可见的方式平铺从10,000像素开始的左侧背景图像--相反，它永远不需要平铺超过两次。(您还可以避免发生整数溢出错误的可能性很小，但不是零。)

if(direction == 1)
{
    panoramaPosition = panoramaPosition + amount;
    panorama.style.backgroundPosition = (panoramaPosition%1277)+"px";
}
else
{
    panoramaPosition = panoramaPosition - amount;
    panorama.style.backgroundPosition = (panoramaPosition%1277)+"px";
}

http://jsbin.com/upociv/2/edit

但是，如果可以在CSS3中实现此功能，则应该使用-- Modernizr让您在JavaScript中检测浏览器是否支持CSS3转换和转换。

Answer 2

jQuery有很大的开销，所以自从我发表评论以来，我一直在尝试重写它，以便不使用jQuery。此外，尽可能多地缓存。调用Panorama将返回一个对象，该对象的所有内容都整齐地包含在属性中。前两个参数是必需的。

我为addEventListener做了一个兼容性的事情，我叫listen，你可能也需要一个getElementsByClassName的兼容性。

和

function Panorama(fullheight, fullwidth, foto, left, right) {
    var panorama = {};
    // crossbrowser listener
    function listen(node, ev, fn) {
        var a = ev.split(' '), i;
        if (node.addEventListener)
            for (i = 0; i < a.length; ++i)
                node.addEventListener(a[i], fn);
        else
            for (i = 0; i < a.length; ++i)
                node.attachEvent('on' + a[i], fn);
    }
    // short convert (px?) string to number, might be useful
    function Xpx(s) {
        return parseFloat(s.replace(/[^\d.]/, ''));
    }
    // movement
    function move(amount, direction) {
        if(direction) {
            panorama.position += amount;
            if (panorama.position > panorama.width)
                panorama.position %= panorama.width;
            foto.style.backgroundPosition = panorama.position + 'px';
        }
        else {
            panorama.position -= amount;
            if (panorama.position < 0)
                panorama.position = panorama.width - ((-panorama.position) % panorama.width);
            foto.style.backgroundPosition = panorama.position + 'px';
        }
    }
    function zoom(scale) {
        panorama.scale = scale;
        panorama.height = scale * fullheight;
        panorama.width = scale * fullwidth;
        foto.style.zoom = scale;
    }
    panorama.move = move;
    panorama.zoom = zoom;
    // cache nodes
    if (!foto) foto = document.getElementsByClassName('panorama_foto')[0];
    if (!left) left = document.getElementsByClassName('panorama-left')[0];
    if (!right) right = document.getElementsByClassName('panorama-right')[0];
    panorama.node = {
        foto: foto,
        left: left,
        right: right
    };
    // panorama scaled size info
    panorama.height = fullheight;
    panorama.width = fullwidth;
    panorama.scale = 1;
    // values
    panorama.timeout = null;
    panorama.position = 0;
    // left
    listen(left, 'mousedown', function() {
        panorama.timeout = setInterval(
            function(){ move(8, 1); },
            50
        );
    });
    listen(left, 'mouseup mouseout', function() { clearInterval(panorama.timeout); });
    // right
    listen(right, 'mousedown', function() {
        panorama.timeout = setInterval(
            function(){ move(8, 0); },
            50
        );
    });
    listen(right, 'mouseup mouseout', function() { clearInterval(panorama.timeout); });
    return panorama;
}

var pan = Panorama(414, 1277);