我应该等待document.onload事件吗？
[英]Should I wait for document.onload event?
问题描述
I have a very simple HTML file in which I want to draw SVGs based on data I retrieve by an AJAX-call. 
我有一个非常简单的HTML文件，其中我想根据通过AJAX调用检索到的数据绘制SVG。
Should I wait until the document is fully loaded by encapsulating my code in a document.onload = function() { ... } block, or can I be sure that the document is already fully loaded when my JS code executes, since my JS code is loaded at the end of the HTML file? 我应该等待直到通过将代码封装在document.onload = function() { ... }块中来完全加载文档，还是应该确定执行JS代码时文档是否已完全加载，因为我的JS代码是在HTML文件的末尾加载的？
The HTML code: HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<svg id="first"></svg>
<svg id="second"></svg>
<script src="d3.v3.min.js"></script>
<script src="myscript.js"></script>
</body>
</html>
The myscript.js code: myscript.js代码：
d3.json('data.json', function (data) {
var svgs = d3.selectAll('svg');
// do some fancy stuff with data and svgs
});
5 个解决方案
解决方案1
1 2014-03-16 01:01:51
您不需要，也不应在window onload事件上添加对d3.json的调用，因为脚本是包含在文件末尾的，而且是ajax调用。
解决方案2
1 已采纳 2014-03-16 01:04:14
I am not quite sure if your svg is inline or not. 我不太确定您的svg是否为内联。 It is quite common to run js scripts immediately at the end of file. 在文件末尾立即运行js脚本是很常见的。 At this point the DOM is loaded and you can interact with it. 此时，DOM已加载，您可以与它进行交互。 Waiting for the onload event means waiting for resources like images or css files you don't need to run your script. 等待onload事件意味着等待不需要运行脚本的资源，例如图像或CSS文件。
解决方案3
1 2014-03-16 01:04:22
You can use firebug from Firefox, it will give you the web execution sequence; 您可以使用Firefox中的firebug，它将为您提供网络执行顺序； accordingly you will know for sure if the document is loaded or not. 因此，您将确定文件是否已加载。 Check this post: Load and execution sequence of a web page? 检查这篇文章： 网页的加载和执行顺序？
解决方案4
0 2014-03-16 01:01:19
With the way you have your code set up it probably doesn't matter if you wait for the onload event or not. 通过设置代码的方式，是否等待onload事件可能并不重要。 However explicitly waiting for the onload event is the safer way, it can prevent issues in the future, if you change the order of your scripts for example. 但是，显式等待onload事件是更安全的方法，例如，如果您更改脚本的顺序，则可以防止将来出现问题。
Also you might want to use window.onload instead. 另外，您可能想使用window.onload来代替。 See here. 看这里
解决方案5
0 2014-03-16 01:09:21
D3 has an awesome queueing system that makes JSON easier to deal with. D3有一个很棒的排队系统，使JSON更易于处理。
You can see it in action here: http://giscollective.org/d3-queue-js/ 您可以在这里查看它的运行情况： http : //giscollective.org/d3-queue-js/
queue()
.defer(d3.json, 'states.json') // topojson polygons
.defer(d3.json, 'cities.json') // geojson points
.await(makeMyMap); // function that uses files
It'll wait till those files are ready and call your mapping operations. 它将等到这些文件准备就绪后再调用您的映射操作。 It'll also set up the json files as easy to read objects that you can parse through. 它还将json文件设置为易于阅读的，可以解析的对象。
I currently use it on http://primarycolors.net and it makes everything easier to digest. 我目前在http://primarycolors.net上使用它，它使一切都更易于消化。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.