onload和Jquery ready（）。他们是否在任何DOM上工作？如表或div？ [英] onload and Jquery ready(). Do they work on any DOM? such as table or div?

问题描述

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

  //示例div，位于标题部分的页面
< div id =cont1> 
东西在这里
< / div> 
 // ...还有很多其他的东西在这里。 
  

我试着把 onload =alert（'test'） / code>在div标签上

 < div id =cont1onload =alert（'test' ）> 
  

以及jquery方法



 <脚本> 
 $（cont1）。ready（function（）{
 alert（test）; 
}）; 
< / script> 
  

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



但是如果在关闭上面的div后立即将 alert（test）; 脚本放到它上面， （因为显示警报时页面上的其他内容尚未显示）。



 < div id =cont1> 
东西在这里
< / div> 
< script> 
 alert（test）; 
< / script> 
  

但是这种方法是一种糟糕的设计，不是吗？那么，有什么其他方法可以达到这个目的呢？解析方案

如果你想在加载一个特定的DOM元素后触发一个javascript动作，请注意：



 < div id =cont1> 
东西在这里
< / div> 
< script> 
 alert（test）; 
< / script> 
  

有些人可能会不同意，但这并不是糟糕的设计。只要在这个脚本中发生的任何事情只涉及HTML文档中出现的元素，一切都应该是洁净的。 DOM按其在文档中出现的顺序线性加载，所以不会出现＃cont1之后的脚本会在＃cont1之前出现的情况。如果脚本很长，可以将它放在一个头文件中的函数中，然后调用那个函数。

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.

//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

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

and also the jquery method

<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).

<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?

解决方案

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:

<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.

这篇关于onload和Jquery ready（）。他们是否在任何DOM上工作？如表或div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！