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

Question

我在此处阅读此问题"Is it faster to swap an img src or show/hide multiple images?"

问题的答案有两个选项。

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点会显示，其余的将被隐藏。有没有更好的方式来编写上面的代码？

Answer 1

首先，将'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 var和使用Ternary operator：

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 
}