1

我在这里读到了这个问题“交换 img src 或显示/隐藏多个图像是否更快？”

问题的答案有两个选择。

1) 更改图像源 - 页面加载速度更快，交换消耗时间。

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
}

因此，如果在一秒钟内接收到的值是 25，将显示 17 个点。如果在下一秒接收到的值是 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
}

现在，如果您真的想修剪代码，请跳过 temp xvar，并使用三元运算符：

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 回答