Question

是否可以检测页面加载时DOM中元素存在的确切时刻？

上下文：在页面加载时，我使用jQuery隐藏我的页面元素（即如果JavaScript可用，我想隐藏div）但是在可怜的互联网连接上，你会看到面板在它消失前一秒左右。

我想在将元素写入DOM时立即隐藏该元素，但我不知道如何执行此操作，或者即使它可能。我不想应用set display：hidden，因为我想在JavaScript不可用时显示面板。

TIA

马特

修订版：我正在使用jQuery - 我的代码在$（document）.ready（）中执行。

Answer 1

将javascript放在元素后面，这将最小化元素可见的时间：

<div id="CrouchingTiger">HiddenDragon</div>
<script type="text/javascript">
document.getElementById('CrouchingTiger').style.display = 'none';
</script>

只要解析了脚本的结束标记，脚本就会在页面加载时运行。

Answer 2

这就是<noscript>标签的用途。

<noscript>This site works better with Javascript enabled.</noscript>

如果禁用了脚本，它将仅显示内容。如果启用了Javascript，则不会显示内容。这听起来就像你正在寻找的行为。

Answer 3

elementReady jQuery plugin允许您在元素加载后立即运行代码。特别适用于动态加载的元素。（我写了这个插件。）

Answer 4

尝试使用文档就绪事件而不是Load事件，因为即使已加载DOM，Load事件也可能需要一段时间才能触发。

如果你真的很绝望，试试这个：

<div id="divToHide">

</div>

<script>document.getElementById('divToHide').style.display = 'none';</script>

如果浏览器看到上面的脚本标记，它会立即运行JavaScript。

Answer 5

使用$（document）.ready（）而不是页面加载。它在加载DOM之后但在加载页面内容之前运行。

  $(document).ready(function() {
      // code goes here
  });

Answer 6

我打算提出类似以下的内容，但我认为它不会起作用：

<noscript>
  <style type="text/css">
     div.myblock { display: visible; }
  </style>
</noscript>

检测元素在DOM中出现的确切时刻

6 个答案: