HTML标签onload事件早于script加载触发，不将JS放头部有什么解决方法？

可行解决方案如下 #

方案1：将事件绑定逻辑移入main.js（最推荐） #

移除img标签的内联onload属性，将事件绑定逻辑放在main.js内部执行，同时兼容图片已提前加载完成的场景：

1. 修改HTML代码：

<!-- 给img加id方便选择，移除onload属性 -->
<img id="targetImg" src="你的图片地址">

<footer>
  <script src="main.js"></script>
</footer>

2. main.js 代码示例：

function myfunction() {
  // 你的原有业务逻辑
}

const targetImg = document.getElementById('targetImg');
// 图片已经加载完成则直接执行
if (targetImg.complete) {
  myfunction();
} else {
  // 未加载完成则绑定load事件监听
  targetImg.addEventListener('load', myfunction);
}

方案2：全局状态标记延迟执行 #

如果必须保留内联onload写法，可以通过全局变量标记加载状态，等JS加载完成后再执行目标函数：

1. 在img标签前加入小段内联脚本：

<script>
// 标记函数是否待执行
window.pendingMyFunction = false;
window.tryRunMyFunction = function() {
  if (typeof myfunction === 'function') {
    myfunction();
  } else {
    window.pendingMyFunction = true;
  }
}
</script>
<img src="" onload="tryRunMyFunction()">

<footer>
  <script src="main.js"></script>
</footer>

2. 在main.js末尾追加执行判断：

function myfunction() {
  // 你的原有业务逻辑
}

// 新增代码：如果已经触发过img加载事件，直接执行
if (window.pendingMyFunction) {
  myfunction();
}

方案3：调整script加载时机 #

无需把script放在head，只需给footer里的script标签添加defer属性，它会在DOM解析完成后、DOMContentLoaded事件触发前执行，且不会阻塞页面渲染，同时可以保证JS执行优先级早于img的load事件（极端网络环境仍推荐用方案1兜底）：

<footer>
  <script src="main.js" defer></script>
</footer>

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