0

私はイベントのページを作成しており、下部に多くのロゴを配置しました。右から左にスライドします。私はjQueryを使用せず、純粋なJavascriptのみを使用しており、最高のパフォーマンスについて疑問に思っています. 私のコードは機能しますが、それを行うためのより良い方法がありますか? この「アニメーション」は時々遅くなると思います。

var banners = [],
    links = [];

links[0] = 'http://...',
banners[0] = 'img/logo1.png',
...

var banLenght = banners.length,
    banContent = "<div id='bannersBack'><div id='banners' style='display:inline-block;'>";

for (var ii =0; ii < banLenght; ii++){
    banContent += "<a target='_blank' href='"+links[ii]+"'><img src='"+banners[ii]+"'></a>";
}
banContent += "</div></div>";
document.getElementById('sliding-logos').innerHTML = banContent;

var actual = document.getElementById('banners');
var move = function(){
    position = actual.offsetLeft;
    position -= 1;
    actual.style.left = position +"px";

    // 3000 is sum of banner's width                
    if (position > -3000) { 
        setTimeout( move, 20);
    }else {
        actual.style.left = "0px";
        move();
    }
};
move();
4

2 に答える 2

1
  • 複数の画像ではなく単一の画像スプライト
  • JS ではなく CSS トランジション。CSS はブラウザ エンジンの一部であり、DOM のプロパティを変更する必要がないため、より高速になるはずです。

例を次に示します (ただし、まだすべてのブラウザーで機能するわけではありません) http://css-tricks.com/infinite-all-css-scrolling-slideshow/

于 2013-09-16T15:14:33.317 に答える
1

CSS transforms+translate を使用すると、最高のパフォーマンスが得られます。最新のブラウザーは、GPU を使用して変換を行うことができます。

.animation {
    transition: .25s ease-in-out;
    transition-property: transform, width;
}
.move {
    width: 200px;  // set width to 200px
    translateX(-200px); // move 200px to the left (always relative)
}

通常、大きな画像や大きな DOM ノードを移動すると、多少のカクつきが見られます。CSS 変換を使用すると、吃音は発生しません。

CSS 変換を使用できない場合 (IE8 以下で動作させる必要があるため)、jQuery の.animate.

于 2013-09-16T15:05:36.553 に答える