javascript onload 和 Jquery ready()。它们适用于任何 DOM 吗？例如表或div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5560654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onload and Jquery ready(). Do they work on any DOM? such as table or div?
提问by Sufendy
I need to put a dynamic content on a div using javascript script. This div is on the top of the page so it will load first before other things below it. And there are really lot's of things down there. So, when I put the script on the ready() or onload, the div will be empty for 2 -3 seconds while other things are displayed. So, I tried putting the onload or ready() to this div.
我需要使用 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.
I tried putting the onload="alert('test')"on the div tag
我试着把 放在onload="alert('test')"div 标签上
<div id="cont1" onload="alert('test')">
and also the jquery method
还有jquery方法
<script>
$("cont1").ready(function(){
alert("test");
});
</script>
Both methods don't work, as the alert is triggered only after the whole page is displayed.
这两种方法都不起作用，因为只有在显示整个页面后才会触发警报。
but if I put the alert("test");script immediately after closing the above div, it works fine (as the other things on the page is not displayed yet when the alert is showing).
但是如果我alert("test");在关闭上述 div 后立即放置脚本，它就可以正常工作（因为在显示警报时页面上的其他内容尚未显示）。
<div id="cont1">
something goes here
</div>
<script>
alert("test");
</script>
But this method is kind of a bad design isn't it? So, any other way to achieve this?
但这种方法是一种糟糕的设计，不是吗？那么，还有其他方法可以实现这一目标吗？
回答by smdrager
If you want a javascript action to fire after a specific DOM element has loaded, simply place it immediately after the element, as you noted:
如果您希望在加载特定 DOM 元素后触发 javascript 操作，只需将其立即放置在该元素之后，如您所述：
<div id="cont1">
something goes here
</div>
<script>
alert("test");
</script>
Some may disagree, but this is not bad design. As long at whatever occurs in this script pertains only to elements which occur prior to it in the HTML document, everything should be kosher. The DOM is loaded linearly in the order it appears in the document, so there is no case in which the script coming after #cont1 would occur prior to #cont1. If the script is lengthy, you could put it in a function in a header include then call the function there instead.
有些人可能不同意，但这并不是一个糟糕的设计。只要此脚本中出现的任何内容仅与 HTML 文档中出现在它之前的元素有关，一切都应该是 kosher 的。DOM 是按照它在文档中出现的顺序线性加载的，因此在#cont1 之后的脚本不会出现在#cont1 之前。如果脚本很长，您可以将它放在头文件中的一个函数中，然后在那里调用该函数。
回答by ctcherry
onloadand the meta-event of "ready" apply the the entire DOM document, not just any DOM node, which is what you are attempting here.
onload并且“就绪”的元事件应用整个 DOM 文档，而不仅仅是任何 DOM 节点，这是您在这里尝试的。
I would stick with jQuery's $(document).ready(...)for code that requires the DOM to be present.
$(document).ready(...)对于需要 DOM 存在的代码，我会坚持使用 jQuery 。
回答by alex
onloadis unfortunately on the windowonly.
onload不幸的是就window唯一的。
However, I have written a jQuery plugin called waitForImagesthat will fire a callback when images have loaded inside any container.
但是，我编写了一个名为waitForImages的 jQuery 插件，它会在图像加载到任何容器中时触发回调。
回答by karlo
This is a bit half way but you can have a img of a single pixel same color as the background at the end of the div and have an onload on the img.
这有点半途而废，但您可以在 div 末尾有一个与背景颜色相同的单个像素的 img，并在 img 上加载。
