在JavaScript中显示/隐藏图像的最佳方式

我在这里读到这个问题

这个问题的答案有两种选择

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
}

var dots=新阵列（30）；
函数onBodyLoad（）{
对于（var j=0；j首先，将
'dot-val'
设置移动到
for
循环中（在
for
循环的每次迭代中为其分配相同的值）。

此外，您还可以更改1个循环中的显示状态，为

保存一个

：

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
}

这是一个img，所以我使用了visibility属性而不是display属性。使用display比visibility有优势吗？顺便说一句，代码速度非常快，因为避免了一个循环！你应该知道你很棒。我更喜欢使用display，因为通常我们不需要在定位其他元素时考虑隐藏元素这里有一个很好的解释：顺便说一句，谢谢！D你现在的名声是“找不到的”；-）
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
}