3

際限なく繰り返される背景画像のスクロールについて質問があります。私が抱えている問題は、それが速く始まるが、すぐに遅くなるということです（吃音など）。コードは次のとおりです。

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 を 1 回だけ計算してから、単純な int のみを含む変数を使用してインクリメントします。それでもまだぐずる。

間隔のタイミングと px の量も変更しようとしましたが、特定のコンピューターではまだ途切れます。たとえば、サイトはタブレットのタブレット用に設計されており、プログラムしていないPCで途切れます。また、タブレットで正しく動作することが必須です。

以下は JSbin の例です: http://jsbin.com/upociv/1/edit

うまくいけば、誰かがこれを最適化する方法についてのヒントや、私がそれを改善する方法についての一般的な提案をしてくれることを願っています.

クイック ノート: iPad (1/2/3) すべての Galaxy タブレット、つまり 8+ Firefox Chrome などでサポートされている必要があります。

4

2 に答える 2

2

増え続けるピクセル数で panoramaPosition を移動する代わりに、代わりに移動してみてくださいpanoramaPosition % (image width)。

このようにすると、ブラウザが背景画像を目に見えないように左に 10,000 ピクセルずつ並べて表示しようとすることがなくなります。代わりに、2 回以上並べて表示する必要がなくなります。(小さいがゼロではない整数オーバーフロー エラーの可能性も回避できます。)

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を使用すると、ブラウザが CSS3 のトランジションと変換をサポートしているかどうかを JavaScript で検出できます。

于 2013-07-17T17:17:32.670 に答える
1

jQueryには大きなオーバーヘッドがあるため、コメント以来、jQueryを使用しないように書き直して遊んでいます。また、可能な限りキャッシュすること。呼び出すと、すべてがきちんとプロパティに含まれているオブジェクトPanoramaが返されます。最初の 2 つのパラメーターは必須です。

と呼んだaddEventListenerの互換性を確保しました。 getElementsByClassNamelistenにも互換性が必要になる場合があります。

デモとコード

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);
于 2013-07-17T17:54:38.660 に答える