1

ここでこの質問を読みました「img srcを交換するか、複数の画像を表示/非表示にする方が速いですか?」

質問に対する答えには 2 つのオプションがあります。

1) 画像ソースを変更する - ページの読み込みが速くなり、スワップに時間がかかります。

2) 画像を事前に読み込み、表示/非表示を切り替える - ページの読み込みは少し遅くなり、スワップは速くなります

私の問題では、ロード時間が2番目に優先されるため、2番目のオプションを使用します。しかし、コードを書くための最良または最適な方法はありますか?

どこかから数字 (10、11、15、25、13、19 など) をランダムに取得し続けているとしましょう。多くの画像 (小さな点、数 30、各画像約 1kb) を表示する必要があります。また、すべての点が 1.5 を表すという条件もあります。そこで、以下のコードを書きました。

var dots = new Array(30);

function onBodyLoad() {
    for(var j=0;j<30;j++)
        dots[j] = document.getElementById("dotimg"+j);
}

//called by some method every second.
//argument: the value received from somewhere.

function updateImages(s) {
    var x = Math.round(s);
    var dotPos = x/1.5;
    for(var i=0;i<dotPos;i++) {
        dots[i].style.visibility='visible'; //show that many dots
        document.getElementById('dot-val').textContent=s;//value received shown in span
    }
    for(var j=dotPos;j<30;j++) dots[j].style.visibility='hidden';//hide remaining dots
}

したがって、1 秒間に受け取った値が 25 の場合、17 個のドットが表示されます。次の 1 秒間に受け取った値が 15 の場合、10 個のドットが表示され、残りは非表示になります。上記のコードを記述するより良い方法はありますか?

4

1 に答える 1

2

まず、'dot-val'設定をforループの外に移動します (ループの各反復で同じ値を割り当てforます)。
また、表示状態を 1 回のループで変更して、保存することもできますfor。

function updateImages(s) {
    var x = Math.round(s);
    var dotPos = x/1.5;
    for(var i=0;i<30;i++) {
        if(i < dotPos){
            dots[i].style.display='inline-block'; // Assuming they're inline-block elements.
        }else{
            dots[i].style.display='none';
        }
    }
    document.getElementById('dot-val').textContent=s;//value received shown in span
}

ここで、本当にコードをトリミングしたい場合は、一時変数をスキップして、三項演算子xを使用します。

function updateImages(s) {
    var dotPos = Math.round(s)/1.5;
    for(var i=0;i<30;i++) {
        dots[i].style.display = (i < dotPos)? 'inline-block' : 'none';
    }
    document.getElementById('dot-val').textContent = s;//value received shown in span
}
于 2012-11-22T10:49:07.247 に答える