I want to run a bit of javascript before the whole page has loaded. Is this possible? Or does the code start to execute on </html>?
我想在整个页面加载之前运行一些javascript。这是可能的吗?还是代码开始在上执行?
3 个解决方案
#1
139
Not only can you, but you have to make a special effort not to if you don't want to. :-)
你不仅可以，而且你必须做出特别的努力，如果你不想。:-)
When the browser encounters a script tag when parsing the HTML, it stops parsing and hands over to the Javascript interpreter, which runs the script. Only when the script is complete does the browser resume parsing the page (because the script might do document.write calls to output markup that the parser should handle). This is the default behavior; there are script tag attributes that can prevent this (defer and async).
当浏览器在解析HTML时遇到脚本标记时，它停止解析并移交给运行脚本的Javascript解释器。只有脚本完成后，浏览器才会继续解析页面(因为脚本可能会执行文档)。编写对输出标记的调用，解析器应该处理这些标记)。这是默认行为;有一些脚本标记属性可以防止这种情况(延迟和异步)。
So consider this:
所以考虑一下:
<!DOCTYPE HTML>
<html><head><!-- yada yada yada --></head>
<body>
<p>Line 1</p>
<script type='text/javascript'>
alert("Stop that parsing!");
</script>
<p>Line two</p>
</body>
</html>
If you load that page, you'll see the "Line 1" paragraph while the alert is showing, and the the "Line 2" paragraph appears after it's done.
如果加载该页，您将在显示警报时看到“第1行”段落，而“第2行”段落将在警报结束后出现。
Where it gets a bit tricky is interacting with the DOM, since the DOM is built up by the parser as it's doing its thing and your script may run before the DOM is completely ready to be manipulated. In general, if you only access elements that precede the script tag in the file, you're fine, but to be safe it's best to put off any DOM interactions until the DOM is fully built.
有点棘手的是与DOM的交互，因为DOM是由解析器在执行其操作时构建的，您的脚本可能在DOM完全准备好被操作之前运行。一般来说，如果您只访问文件中脚本标记前面的元素，那么您很好，但是为了安全起见，最好在DOM完全构建之前停止任何DOM交互。
But for the most part, you can happily access the earlier elements. Consider:
但是在大多数情况下，您可以很高兴地访问前面的元素。考虑:
<!DOCTYPE HTML>
<html><head><!-- yada yada yada --></head>
<body>
<p id='p1'>Line 1</p>
<script type='text/javascript'>
document.write("<p>p1 is null? " + (document.getElementById('p1') == null ? "yes" : "no") + "</p>");
document.write("<p>p2 is null? " + (document.getElementById('p2') == null ? "yes" : "no") + "</p>");
</script>
<p id='p2'>Line two</p>
</body>
</html>
The output you see is:
您看到的输出是:
Line 1 p1 is null? false p2 is null? true Line 2
...because p1 exists as of when the script runs, but p2 doesn't.
…因为当脚本运行时p1存在，而p2不存在。
I don't have a link handy, but In this message, the developers of the Google Closure library say that they don't see any big value to the "ready" style events that Prototype, jQuery, ExtJS, Dojo, and most others provide because if you put the script after the elements you want to interact with, you're fine; which falls in line with YUI's recommendation that you just put your scripts right before the closing </html> tag (since you have to put them somewhere, after all, and down there they don't hold up your page display). Now, personally, I do see some value in those events although I think they're over-used, but my point is that clearly you can start interacting with things very early on.
我没有联系方便,但是在这个消息,谷歌关闭图书馆的开发商说,他们没有看到任何大的价值“准备好”风格的事件原型,jQuery,ExtJS,Dojo,和大多数人提供,因为如果你把脚本元素后你想与你很好;这符合YUI的建议，即您只需将脚本放在关闭的标记之前(因为您必须将它们放在某个地方，毕竟，在那里它们不会占用页面显示)。现在，就我个人而言，我确实看到了这些事件的一些价值，尽管我认为它们被过度使用了，但我的观点是，很明显，你可以很早就开始与事物互动。
#2
6
You can run javascript code at any time. AFAIK it is executed at the moment the browser reaches the <script> tag where it is in. But you cannot access elements that are not loaded yet.
您可以在任何时候运行javascript代码。在浏览器到达其所在的
So if you need access to elements, you should wait until the DOM is loaded (this does not mean the whole page is loaded, including images and stuff. It's only the structure of the document, which is loaded much earlier, so you usually won't notice a delay), using the DOMContentLoaded event or functions like $.ready in jQuery.
因此，如果您需要访问元素，您应该等待DOM加载(这并不意味着加载整个页面，包括图像和其他内容)。使用DOMContentLoaded事件或函数(如$)，这只是文档的结构，它的加载时间要早得多，所以您通常不会注意到延迟)。在jQuery。
#3
-5
I think you'll get an error if you attempt to refer to a control that is in the BODY before the whole page is loaded.
我认为，如果您试图引用在加载整个页面之前的主体控件，您将会得到一个错误。
#1
139
Not only can you, but you have to make a special effort not to if you don't want to. :-)
你不仅可以，而且你必须做出特别的努力，如果你不想。:-)
When the browser encounters a script tag when parsing the HTML, it stops parsing and hands over to the Javascript interpreter, which runs the script. Only when the script is complete does the browser resume parsing the page (because the script might do document.write calls to output markup that the parser should handle). This is the default behavior; there are script tag attributes that can prevent this (defer and async).
当浏览器在解析HTML时遇到脚本标记时，它停止解析并移交给运行脚本的Javascript解释器。只有脚本完成后，浏览器才会继续解析页面(因为脚本可能会执行文档)。编写对输出标记的调用，解析器应该处理这些标记)。这是默认行为;有一些脚本标记属性可以防止这种情况(延迟和异步)。
So consider this:
所以考虑一下:
<!DOCTYPE HTML>
<html><head><!-- yada yada yada --></head>
<body>
<p>Line 1</p>
<script type='text/javascript'>
alert("Stop that parsing!");
</script>
<p>Line two</p>
</body>
</html>
If you load that page, you'll see the "Line 1" paragraph while the alert is showing, and the the "Line 2" paragraph appears after it's done.
如果加载该页，您将在显示警报时看到“第1行”段落，而“第2行”段落将在警报结束后出现。
Where it gets a bit tricky is interacting with the DOM, since the DOM is built up by the parser as it's doing its thing and your script may run before the DOM is completely ready to be manipulated. In general, if you only access elements that precede the script tag in the file, you're fine, but to be safe it's best to put off any DOM interactions until the DOM is fully built.
有点棘手的是与DOM的交互，因为DOM是由解析器在执行其操作时构建的，您的脚本可能在DOM完全准备好被操作之前运行。一般来说，如果您只访问文件中脚本标记前面的元素，那么您很好，但是为了安全起见，最好在DOM完全构建之前停止任何DOM交互。
But for the most part, you can happily access the earlier elements. Consider:
但是在大多数情况下，您可以很高兴地访问前面的元素。考虑:
<!DOCTYPE HTML>
<html><head><!-- yada yada yada --></head>
<body>
<p id='p1'>Line 1</p>
<script type='text/javascript'>
document.write("<p>p1 is null? " + (document.getElementById('p1') == null ? "yes" : "no") + "</p>");
document.write("<p>p2 is null? " + (document.getElementById('p2') == null ? "yes" : "no") + "</p>");
</script>
<p id='p2'>Line two</p>
</body>
</html>
The output you see is:
您看到的输出是:
Line 1 p1 is null? false p2 is null? true Line 2
...because p1 exists as of when the script runs, but p2 doesn't.
…因为当脚本运行时p1存在，而p2不存在。
I don't have a link handy, but In this message, the developers of the Google Closure library say that they don't see any big value to the "ready" style events that Prototype, jQuery, ExtJS, Dojo, and most others provide because if you put the script after the elements you want to interact with, you're fine; which falls in line with YUI's recommendation that you just put your scripts right before the closing </html> tag (since you have to put them somewhere, after all, and down there they don't hold up your page display). Now, personally, I do see some value in those events although I think they're over-used, but my point is that clearly you can start interacting with things very early on.
我没有联系方便,但是在这个消息,谷歌关闭图书馆的开发商说,他们没有看到任何大的价值“准备好”风格的事件原型,jQuery,ExtJS,Dojo,和大多数人提供,因为如果你把脚本元素后你想与你很好;这符合YUI的建议，即您只需将脚本放在关闭的标记之前(因为您必须将它们放在某个地方，毕竟，在那里它们不会占用页面显示)。现在，就我个人而言，我确实看到了这些事件的一些价值，尽管我认为它们被过度使用了，但我的观点是，很明显，你可以很早就开始与事物互动。
#2
6
You can run javascript code at any time. AFAIK it is executed at the moment the browser reaches the <script> tag where it is in. But you cannot access elements that are not loaded yet.
您可以在任何时候运行javascript代码。在浏览器到达其所在的
So if you need access to elements, you should wait until the DOM is loaded (this does not mean the whole page is loaded, including images and stuff. It's only the structure of the document, which is loaded much earlier, so you usually won't notice a delay), using the DOMContentLoaded event or functions like $.ready in jQuery.
因此，如果您需要访问元素，您应该等待DOM加载(这并不意味着加载整个页面，包括图像和其他内容)。使用DOMContentLoaded事件或函数(如$)，这只是文档的结构，它的加载时间要早得多，所以您通常不会注意到延迟)。在jQuery。
#3
-5
I think you'll get an error if you attempt to refer to a control that is in the BODY before the whole page is loaded.
我认为，如果您试图引用在加载整个页面之前的主体控件，您将会得到一个错误。