blocks|key|524177|text|<script>
++++window.addEventListener("DOMContentLoaded",+function()+{
++++++++//+do+stuff
++++},+false);
</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|524178|这样做是为了知道所有已解析的元素在DOM中都可用，等等。|unstyled|524179|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;script&gt;
    window.addEventListener("DOMContentLoaded", function() {
        // do stuff
    }, false);
&lt;/script&gt;
</code></pre>

<p>You do that so you know all the parsed elements are available in the DOM etc.</p>


blocks|key|740730|text|DOM通常在onLoad运行之前就准备好了。onLoad仅在加载所有内容后运行--外部脚本、图像、样式表等。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|740731|但是DOM，即HTML结构在此之前就已经准备好了。如果您在页面底部(或在脚本使用的页面部分之后)运行代码，也可以很好地工作。|740732|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>The DOM is usually ready before onLoad runs. onLoad only runs after everything loads - external scripts, images, stylesheets, etc.</p>

<p>But the DOM, i.e. the HTML structure is ready before that. If you run the code at the bottom of the page (or after the parts of the page the script works with) that will work fine as well.</p>


blocks|key|740773|text|获取jQuery并使用以下代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|740774|$(document).ready(function(){
++++//+Do+stuff
});|code-block|syntax|javascript|740775|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/JQuery^0|2|6|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Get <a href="http://en.wikipedia.org/wiki/JQuery" rel="nofollow">jQuery</a> and use the following code.</p>

<pre><code>$(document).ready(function(){
    // Do stuff
});
</code></pre>


blocks|key|740818|text|最简单的解决方案是使用jQuery及其$(document).ready(function()+{+....+});函数。您可以将自己的代码放在....中，而不是放在其中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|740819|请注意，它基本上做了@Shadow2531建议的相同的事情，但也可以在不支持该事件的旧浏览器中工作。|740820|entityMap^0|J|13|20|4|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

<p>The easiest solution is using jQuery and its <code>$(document).ready(function() { .... });</code> function. Instead of <code>....</code> you put your own code.</p>

<p>Note that it basically does the same thing @Shadow2531 suggested, but also works in old browsers not supporting that event.</p>


blocks|key|740866|text|您可能知道，在DOM完全加载之前，不应该运行init函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|740867|您必须在DOM准备好后立即运行init函数的原因是，一旦页面加载完毕，用户就会开始点击按钮等。您必须最小化页面加载和init函数尚未运行时不可避免的小差距。如果这个差距变得太大(即，太长时间)您的用户可能会遇到不适当的行为...(即您的上传将不起作用)。|740868|其他用户已经提供了如何调用init函数的很好的示例，所以我在这里不再重复了……;)|740869|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>As you probably know you should not run init functions before the DOM is fully loaded.</p>

<p>The reason you must run the init function as soon as the DOM is ready, is that once the page has loaded the user starts hitting buttons etc. You have to minimize the small inavoidable gap where the page is loaded and the init-functions haven't run yet. If this gap gets too big (ie. too long time) your user might experience inappropiate behaviour... (ie. your upload will not work).</p>

<p>Other users have provided fine examples of how to call the init function, so I will not repeat it here... ;)</p>


blocks|key|740916|text|您也可以像这样将<script>移动到页面的底部：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|740917|<html>
<body>
++++<main></main>
++++<script>
++++++++//+code
++++</script>
</body>
</html>|code-block|syntax|javascript|740918|entityMap^0|8|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>You could also just move the <code>&lt;script&gt;</code> to the bottom of your page like this:</p>
<pre><code>&lt;html&gt;
&lt;body&gt;
    &lt;main&gt;&lt;/main&gt;
    &lt;script&gt;
        // code
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|740995|text|var+Tette+=+
{
++++init:+function()
++++{
/*+Your+HTML+code+*/
++++}
};
Core.start(Tette);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|740996|您可以在此代码中尝试，在脚本的最后一行注册“Core.start(您的对象)”。这是一种在DOM加载后安全加载函数的方法。|unstyled|740997|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>var Tette = 
{
    init: function()
    {
/* Your HTML code */
    }
};
Core.start(Tette);
</code></pre>
<p>You can try in this code, registering &quot;Core.start(your object)&quot; on the last line of the script. This is a way to load in safety your functions after the DOM loading.</p>


<p>I'm using a JavaScript upload script that says to run the initialize function as soon as the DOM is ready. I currently have it working just fine with either a call to the function with <code>body.onload</code> or directly after the function is defined. The function builds some HTML in a placeholder div that acts as the file uploader tool.</p>

<p>My question is what is the best practice here? Since it works for now, why would the instructions say to run the init function as soon as the DOM is ready? Should I be adding a &lt;script> tag directly after the placeholder DIV for example?</p>


Run JavaScript function when the DOM is "ready"?

我使用的是一个JavaScript上传脚本，它告诉我们一旦DOM准备就绪，就立即运行初始化函数。目前，我使用body.onload或直接在函数定义之后调用函数，都能很好地工作。该函数在占位符div中构建一些HTML，作为文件上传器工具。我的问题是，这里的最佳实践是什么？既然它现在可以工作，为什么指令会说只要DOM准备好...

问当DOM“就绪”时运行JavaScript函数？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当DOM“就绪”时运行JavaScript函数？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当DOM“就绪”时运行JavaScript函数？
EN