使用DOMContentLoaded事件来替代.onload，给具体的等待src图片加载完后再运行的函数的替代前和替代后的前后对比代码示例

`onload` 是传统浏览器中用于检测页面元素，如图像 (`img`) 或 `<iframe>` 完全加载完毕的事件。然而，在现代 JavaScript 中，推荐使用 `DOMContentLoaded` 事件，因为它意味着整个 HTML 文档已经解析完成，此时文档结构已经就绪，而不仅仅是外部资源（如图片）全部加载。

以下是使用 `onload` 的旧式代码示例：

var img = new Image();
img.src = "example.jpg";
img.onload = function() {
  // 图片加载完成后执行的函数
  console.log("图片已加载");
  myFunction();  // 这里假设有一个名为myFunction的函数
};

而使用 `DOMContentLoaded` 的新式代码会更简洁，因为我们可以直接在事件处理程序中操作DOM元素，无需等待图片加载：

document.addEventListener('DOMContentLoaded', function() {
  var img = document.createElement('img');
  img.src = "example.jpg";
  img.onload = function() {
    console.log("图片已加载");
    myFunction();  // 当DOMContentLoaded时，即使图片未加载也可以执行
  };
  // 将img添加到DOM中，这样DOMContentLoaded会在所有内容解析后立即触发
  document.body.appendChild(img);
});

注意，这里我们提前将 `img` 元素添加到了 `body` 中，这样即使 `onload` 事件还未触发，`DOMContentLoaded` 也能保证 DOM 已经准备好了。如果图片是在DOMContentLoaded之后才动态创建并添加的，则仍需保持 `onload` 事件监听。