Question

我试图学习有关数据可视化的知识，并且在youtube上找到了在线课程。我正在处理本课程的代码，尝试从sketch.js调用.json文件，但是我陷入了无限加载页面的困境。我认为问题出在预加载功能中，我不明白这是怎么回事。

这是sketch.js

var data;

function preload() {
    data = loadJSON("birds.json");
}

function setup() {
    noCanvas();
    var bird = data.birds[1].members[2];
    createP(bird);
}

这是.json文件，已在线验证，因此可以正常工作：

{
  "description": "Birds of Antarctica, grouped by family",
  "source": "https://en.wikipedia.org/wiki/List_of_birds_of_Antarctica",
  "birds": [
    {
      "family": "Albatrosses",
      "members": [
        "Wandering albatross",
        "Grey-headed albatross",
        "Black-browed albatross",
        "Sooty albatross",
        "Light-mantled albatross"
      ]
    },
    {
      "family": "Cormorants",
      "members": [
        "Antarctic shag",
        "Imperial shag",
        "Crozet shag"
      ]
    },
    {
      "family": "Diving petrels",
      "members": [
        "South Georgia diving petrel",
        "Common diving petrel"
      ]
    },
    {
      "family": "Ducks, geese and swans",
      "members": [
        "Yellow-billed pintail"
      ]
    },
    {
      "family": "Gulls",
      "members": [
        "Kelp gull"
      ]
    },
    {
      "family": "Penguins",
      "members": [
        "King penguin",
        "Emperor penguin",
        "Gentoo penguin",
        "Adelie penguin",
        "Chinstrap penguin",
        "Rockhopper penguin",
        "Macaroni penguin"
      ]
    },
    {
      "family": "Shearwaters and petrels",
      "members": [
        "Antarctic giant petrel",
        "Hall's giant petrel",
        "Southern fulmar",
        "Antarctic petrel",
        "Cape petrel",
        "Snow petrel",
        "Great-winged petrel",
        "White-headed petrel",
        "Blue petrel",
        "Broad-billed prion",
        "Salvin's prion",
        "Antarctic prion",
        "Slender-billed prion",
        "Fairy prion",
        "Grey petrel",
        "White-chinned petrel",
        "Kerguelen petrel",
        "Sooty shearwater"
      ]
    },
    {
      "family": "Sheathbills",
      "members": [
        "Snowy sheathbill"
      ]
    },
    {
      "family": "Skuas and jaegers",
      "members": [
        "South polar skua",
        "Brown skua"
      ]
    },
    {
      "family": "Storm petrels",
      "members": [
        "Grey-backed storm petrel",
        "Wilson's storm petrel",
        "Black-bellied storm petrel"
      ]
    },
    {
      "family": "Terns",
      "members": [
        "Arctic tern",
        "Antarctic tern"
      ]
    }
  ]
}

最后，这是我的index.html

<!DOCTYPE html>
<html lang="en">
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
  </body>
</html>

我真的不明白我在做什么错。

在此先感谢您的帮助。

Answer 1

我已经快速运行了您的代码，并且返回了“ Crozet shag”，因此看起来不错。我正在使用VS Code并将其加载到Live Server中。

我认为您的操作没有任何问题，但是听起来您的环境存在问题。

当文件在线放置时，某些功能（例如，加载外部文件）可以按预期工作，但是如果您尝试在本地查看它们，则会在控制台中看到某种“跨域”错误。您是否在使用本地Web服务器？这可能会解决您的问题。

预加载功能无法获取

1 个答案: