我有一个关于背景图片滚动的问题,它会无限重复。我的问题是它开始得很快,但很快就变得越来越慢(卡顿等)。以下是代码:
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";
}
}
我已经尝试了一些优化方法。比如使用标准的JavaScript编写函数。只在增量变量中包含一个简单的整数,计算panoramaPosition只进行一次。但它仍然会出现卡顿。
我还尝试更改间隔时间和像素数量,但在某些电脑上仍然会出现卡顿。例如,该网站是为平板电脑设计的,在平板电脑上会出现卡顿,而在我编程的电脑上不会。而且必须确保它在平板电脑上正常工作。
这是一个JSbin示例: http://jsbin.com/upociv/1/edit 希望有人能给出优化建议或普遍的建议,以提高其性能。
快速提醒:必须支持iPad(1/2/3),所有Galaxy平板电脑以及IE 8+ Firefox Chrome等浏览器。
panoramaPosition %(图像宽度)
来移动它。这可能会有所帮助。 - Blazemonger