從頁面中完全隱藏元素的最有效方法是什么？

Question

情況

• 我有很多想要隱藏的btns。
• 我有點讓他們隱藏，但不完全是我故意想要的。
• 在我的頁面加載時，它們閃爍得非常快。
• 我正在努力試圖隱藏它們。

我采取的步驟

• 首先，我使用hide() jQuery函數來做到這一點。 我喜歡它，但后來我注意到所有這些btns在頁面加載期間閃爍。 #Curious ???

• 其次，我學會了.css("display","none"); 比hide()快，所以我嘗試了，我仍然得到相同的結果，也許它更快，但我仍然看到閃爍。

• 第三，有些人聲稱.attr('disabled', true); 甚至更快， 是的我已經嘗試過了，甚至根本沒有工作。

• .attr('disabled', true); 可能已經過時，然后我使用最新的.prop('disabled', true); ，那仍然無法正常工作！

我現在完全無能為力。 我希望有人能幫助我結束這個。

從頁面中完全隱藏元素的最有效方法是什么？

Answer 1

你觀察到的延遲是瀏覽器下載和執行腳本所花費的時間，用於設置display:none JavaScript方法display:none按鈕上的display:none無關緊要，總會有延遲（因為瀏覽器必須下載，解析並執行腳本）。

最快的方法是不使用JavaScript，只需在渲染頁面時通過CSS（內聯或樣式表）在按鈕上設置display: none 。

Answer 2

首先， hide()和.css('display', 'none')實際上是等價的。 閃存正在發生，因為在頁面初始加載后下載和執行腳本所花費的時間。

當然，隱藏按鈕的最快方法是將它們從HTML標記中完全刪除。 :)

但是，假設您不想從標記中刪除按鈕，而是在某些時候您可能希望以編程方式顯示按鈕，您將希望從一開始就使用CSS隱藏它們：

button {
  display: none;
}

（該disabled屬性只是讓使用戶不能在支持該屬性的瀏覽器按鈕進行交互。它不會隱藏元素。）

Answer 3

從html5開始，有一個新的hidden屬性，用於控制是否顯示元素。 您應該將其添加到元素中。 這樣，在解析html的同時隱藏了元素，並且沒有延遲。

你也可以使用jquery，通過使用$(element).attr("hidden", "true");以標准方式添加它$(element).attr("hidden", "true");

但是，如果使用jquery添加屬性，則延遲仍然存在，因為在顯示html和加載並運行js之間會有延遲。

注意：這僅適用於IE 11+