HTML5 JavaScript动画仅当body标签内写onload="init()"时才播放，原因是什么？

onload是HTML原生的事件属性，绑定的函数会在所属DOM元素及该元素关联的所有外部资源完全加载完成后自动触发执行。你代码里的init()是Adobe Animate导出动画时自带的初始化函数，负责加载动画资源、初始化canvas画布、启动动画渲染流程。

核心原因是*onload事件仅支持部分特定HTML元素*：只有本身需要加载外部资源的元素才支持该事件，比如<body>、<img>、<script>、<iframe>等；普通容器元素如<div>、<p>等本身不需要加载外部资源，浏览器会直接忽略绑定在这类元素上的onload属性，因此写在div上的onload="init()"根本不会触发，动画自然无法启动。
除此之外，<body>的onload事件触发时机刚好匹配动画的启动要求：它会等整个页面的所有资源（包括DOM结构、样式表、脚本、图片等）全部加载完成后才执行init()，避免了动画依赖的资源未加载完就执行初始化导致的报错。

如果你不想修改原有项目的body标签属性，也可以用以下等价方案替代：

• 在动画相关的脚本末尾添加监听代码：

// 效果与body标签绑定onload完全一致
window.addEventListener('load', init);

• 如果确认动画依赖的所有脚本已经加载完毕，也可以直接在动画代码的最后添加一行执行语句：

<script>init()</script>

内容的提问来源于stack exchange，提问作者arcticsnowpup