Question

我有一个非常简单的HTML文件，我想根据我通过AJAX调用检索的数据绘制SVG。

我是否应该通过将代码封装在document.onload = function() { ... }块中来等待文档完全加载，或者我可以确保在执行JS代码时文档已经完全加载，因为我的JS代码已加载到HTML文件的结尾？

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>

myscript.js代码：

d3.json('data.json', function (data) {
    var svgs = d3.selectAll('svg');
    // do some fancy stuff with data and svgs
});

Answer 1

您不需要也不应该在窗口onload事件中添加对d3.json的调用，因为您的脚本包含在文件的末尾，而且它是一个ajax调用。

Answer 2

我不太确定你的svg是否内联。在文件末尾立即运行js脚本是很常见的。此时DOM已加载，您可以与它进行交互。等待onload事件意味着等待您不需要运行脚本的图像或css文件等资源。

Answer 3

您可以使用Firefox中的firebug，它将为您提供Web执行顺序;因此，您将确定文件是否已加载。查看此帖子：Load and execution sequence of a web page?

Answer 4

通过设置代码的方式，如果您等待onload事件，则无关紧要。但是，明确等待onload事件是更安全的方式，如果您更改脚本的顺序，它可以防止将来出现问题。

您也可以使用window.onload代替。见here.

Answer 5

D3有一个很棒的排队系统，可以让JSON更容易处理。

你可以在这里看到它： 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

它会等到这些文件准备就绪并调用您的映射操作。它还将json文件设置为易于读取的对象，您可以解析它们。

我目前在http://primarycolors.net上使用它，它使一切变得更容易消化。

我应该等待document.onload事件吗？

5 个答案: