ChessboardJs：JavaScript板仅在第一次工作

Question

编辑：可以在我的页面URL上找到页面代码。我不知道故障可能在哪里。请帮忙。

问题：

当我们第一次单击国际象棋难题页面时，它们会起作用。但是，当我们从首页上单击木板时，这些木板就会消失。

演示：

这是主页。

单击播放器的图片，您将转到此页面。请注意，这些板出现在这一块中。

但是您看到该链接可以返回到拼图列表。您单击它，然后再次进入主页。

现在，如果您单击任何玩家的照片（甚至是同一位玩家的照片），这就是您得到的。

从现在开始，所有的拼图链接都将失效。

您可以在chess-puzzle.com上自行检查。

少量信息：

该网站使用了Cloudfare。几分钟前，我使用Cloudfare（非活动状态）进行了测试，但问题仍未解决。

我验证了JS，这似乎还可以。

我只有一个CSS文件（mycss.css）。该软件附带了其他外部文件。

我不知道共享哪些代码，因为我不知道为什么会发生这种情况。尽管我可以根据需要编辑此问题来共享任何代码。

有人可以提供答案吗？

Answer 1

问题是脚本（jquery，国际象棋棋盘）中具有属性async，这意味着它们不会以任何特定顺序加载。

但是，棋盘在某些时候使用jquery，因此如果棋盘脚本首先加载/运行，它将崩溃，因为它找不到jquery。

底部的脚本也会失败，因为它可能会在加载jQuery之前运行。

最后，您在棋盘头中包含了两次棋盘脚本。

针对您的情况的最佳解决方案是将脚本移动到内联脚本上方的body底部，并从其中删除async属性。