在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 
}