javascript - onload 和 Jquery ready()。它们适用于任何 DOM 吗？比如表或分区？

Question

我需要使用 javascript 脚本将动态内容放在 div 上。这个 div 位于页面的顶部，因此它会在它下面的其他内容之前首先加载。那里真的有很多东西。因此，当我将脚本放在 ready() 或 onload 上时，div 将空 2 -3 秒，同时显示其他内容。所以，我尝试将 onload 或 ready() 放到这个 div 中。

//example div, which is on the header part of the page
<div id="cont1">
something goes here
</div>
//... and there are a lot of other things going down here.

我尝试将 onload="alert('test')" 放在 div 标签上

<div id="cont1" onload="alert('test')">

还有jquery方法

<script>
$("cont1").ready(function(){
    alert("test");
});
</script>

这两种方法都不起作用，因为只有在显示整个页面后才会触发警报。

但如果我在关闭上述 div 后立即放置 alert("test"); 脚本，它工作正常(因为当显示警报时页面上的其他内容尚未显示).

<div id="cont1">
something goes here
</div>
<script>
    alert("test");
</script>

但是这种方法是一种糟糕的设计，不是吗？那么，还有其他方法可以实现这一目标吗？

Answer 1

如果您希望在加载特定 DOM 元素后触发 javascript 操作，只需将其紧跟在该元素之后，如您所述:

<div id="cont1">
something goes here
</div>
<script>
    alert("test");
</script>

有些人可能不同意，但这不是糟糕的设计。只要此脚本中出现的任何内容仅与 HTML 文档中出现在它之前的元素有关，所有内容都应该是 kosher。 DOM 按照它在文档中出现的顺序线性加载，因此在#cont1 之后的脚本不会出现在#cont1 之前。如果脚本很长，您可以将它放在 header 包含的函数中，然后改为调用该函数。