html 如何监听script和link资源加载完毕后再执行js

在 HTML 中，可以使用 `window.onload` 事件来监听整个页面的所有资源（包括 `<script>` 和 `<link>`）加载完成后执行相关的 JavaScript 代码。但是，如果只想监听特定的 `<script>` 和 `<link>` 资源加载完成后再执行 JavaScript 代码，可以使用以下两种方法：

1. 使用 `onload` 事件

可以使用 `onload` 事件来监听 `<script>` 和 `<link>` 资源加载完成后执行 JavaScript 代码。例如：

<script>
  var script = document.createElement('script');
  script.onload = function() {
    console.log('script loaded');
    // 在这里编写需要执行的 JavaScript 代码
  };
  script.src = 'path/to/script.js';
  document.head.appendChild(script);

  var link = document.createElement('link');
  link.onload = function() {
    console.log('link loaded');
    // 在这里编写需要执行的 JavaScript 代码
  };
  link.rel = 'stylesheet';
  link.href = 'path/to/style.css';
  document.head.appendChild(link);
</script>

2. 使用 `load` 事件

可以使用 `load` 事件来监听 `<script>` 和 `<link>` 资源加载完成后执行 JavaScript 代码。但是，需要注意的是，`load` 事件只能用于某些元素（如 `<img>`、`<iframe>`、`<script>`、`<link>` 等）和 window 对象。例如：

<script>
  var script = document.createElement('script');
  script.addEventListener('load', function() {
    console.log('script loaded');
    // 在这里编写需要执行的 JavaScript 代码
  });
  script.src = 'path/to/script.js';
  document.head.appendChild(script);

  var link = document.createElement('link');
  link.addEventListener('load', function() {
    console.log('link loaded');
    // 在这里编写需要执行的 JavaScript 代码
  });
  link.rel = 'stylesheet';
  link.href = 'path/to/style.css';
  document.head.appendChild(link);
</script>

以上两种方法都可以实现监听 `<script>` 和 `<link>` 资源加载完成后再执行 JavaScript 代码。具体使用哪种方法，可以根据实际需求和情况来选择。