javascript scratchblocks 方形空间

Question

我想在我的 Squarespace 网站上使用 Scratchblocks(一种从文本列表中呈现可视化 Scratch 代码块的工具，on GitHub)。我遇到的问题是，暂存 block 从未在第一次加载时呈现 - 但仅在刷新后呈现。

这是在标题中(在特定博客的标题中设置):

<script src="https://scratchblocks.github.io/js/scratchblocks-v3.1-min.js""></script>

然后我想我需要在页面末尾调用这个函数 - 我已经把它放在页脚中了:

scratchblocks.renderMatching('pre.blocks');

注意:当我查看源代码时，我在页面末尾看到了两次这个 JavaScript。不确定那里发生了什么。

这是我网站上的一个示例，它仅在刷新后才呈现暂存 block 。 [更新 - 按照下面提供的修复，这现在第一次呈现，据我所知每次都呈现。] [ http://www.glennbroadway.com/coding-zone/2017/4/6/simple-collisions-in-scratch] 2

这是其他人使用它并且它正常工作的示例。我已经检查了来源，但我无法弄清楚他们是怎么做到的。 https://codeclubprojects.org/en-GB/scratch/memory/

我还尝试了 stackoverflow 上其他地方列出的所有不同方法，以便仅在 HTML 完成后加载 javascript。我无法让它们中的任何一个工作 - 但我认为问题与 Squarespace 有关，我只是不具备解决问题​​的知识。

如有任何帮助，我们将不胜感激。

Answer 1

在 Squarespace 中，当您的自定义 Javascript 仅在页面刷新后工作时，它很可能与 Squarespace's AJAX loading 有关。 :

Occasionally, Ajax may conflict with embedded custom code or anchor links. Ajax can also interfere with site analytics, logging hits on the first page only.

您可以为您的模板禁用 AJAX。或者，查看此处概述的其他方法:https://stackoverflow.com/a/42604055/5338581包括:

window.addEventListener("mercury:load", function(){
   // do stuff
});

此外，我通常建议将自定义代码放在“页脚”代码注入(inject)区域，除非您有特殊原因不这样做。