从页面中完全隐藏元素的最有效方法是什么？

Question

场合

• 我有很多想隐藏的btns。
• 我有点让他们隐藏，但不完全是我故意想要的。
• 我的页面正在加载时，它们闪烁得非常快。
• 我努力试图隐藏它们。

我采取的步骤

• 首先，我使用hide() jQuery函数来做到这一点。我喜欢它，但随后 我注意到在页面加载期间所有这些btns都在闪烁。 #Curious ???

• 其次，我了解到了这一点 .css("display","none");比hide()快，所以我尝试了，我仍然得到相同的结果，也许它更快，但我仍然看到闪烁。

• 第三，有些人声称.attr('disabled', true);更快，而是我已经尝试过了，而且根本没有工作。

• .attr('disabled', true);可能已过时，然后我使用最新的.prop('disabled', true);，但仍然无效！

我现在完全无能为力。我希望有人可以帮我制止这个。

从页面中完全隐藏元素的最有效方法是什么？

Answer 1

您观察到的延迟是浏览器下载和执行脚本所花费的时间，用于在按钮上设置display:none的JavaScript方法无关紧要，总会有延迟（因为浏览器必须下载，解析并执行脚本。）

最快方式是不使用JavaScript，只需在渲染页面时通过CSS（内联或样式表）在按钮上设置display: none。

Answer 2

首先，hide()和.css('display', 'none')几乎相同。闪存正在发生，因为在页面初始加载后下载和执行脚本所需的时间。

当然，隐藏按钮的最快方法是将它们从HTML标记中删除。 ：）

但是，假设您不想从标记中删除按钮，而在某些时候您可能希望以编程方式显示按钮，您将需要从一开始就使用CSS隐藏它们：

button {
  display: none;
}

（disabled属性只是为了让用户无法与支持该属性的浏览器上的按钮进行交互。它不隐藏元素。）

Answer 3

从html5开始，有一个新的hidden属性可控制是否显示元素。您应该将其添加到元素中。这样，在解析html的同时隐藏了元素，并且没有延迟。

您还可以使用$(element).attr("hidden", "true");

以jquery的标准方式添加此项

但是，如果使用jquery添加属性，则延迟仍然存在，因为在显示html和加载并运行js之间会有延迟。

注意：这仅适用于IE 11 +