在 HTML 页面中加载 JavaScript 文件并触发事件时，document.ready 和 onload 是两个不同的事件处理方式，它们有以下不同之处：

执行时机：

document.ready（或 jQuery 的 $(document).ready()）：这是 jQuery 提供的事件，它在 DOM 树构建完毕，但在页面的所有资源（如图片、样式表）加载完成之前触发。这意味着它可以在 DOM 就绪后立即执行 JavaScript 代码，而不必等待所有资源加载完成。
onload：onload 事件是原生 JavaScript 事件，它在整个页面及其所有资源加载完成后触发。这包括页面上的所有图片、样式表、脚本等资源。因此，onload 事件通常在页面完全加载后才执行相关 JavaScript 代码。
依赖资源：

document.ready：适合用于不需要等待所有资源加载完成的情况，例如修改 DOM 结构或执行一些与页面加载无关的操作。
onload：适合用于需要等待所有资源加载完成后才能安全执行的操作，例如操作页面上的图片或测量页面元素的尺寸。
使用场景：

document.ready：常用于 jQuery 中，或者在需要在 DOM 就绪后执行一些初始化操作的情况下。
onload：常用于纯 JavaScript 环境中，或者在需要确保所有资源加载完成后才执行操作的情况下。

<!-- 使用 document.ready（jQuery） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    // 在 DOM 就绪后执行
    console.log("DOM 就绪");
  });
</script>

<!-- 使用 onload -->
<script>
  window.onload = function() {
    // 在所有资源加载完成后执行
    console.log("页面和所有资源加载完成");
  };
</script>

document.ready 和 onload 都是用于处理页面加载事件的方式，但它们的触发时机和适用场景不同。选择使用哪个事件取决于你的需求，如果只需要在 DOM 就绪后执行操作，可以使用 document.ready（通常与 jQuery 一起使用），如果需要等待所有资源加载完成后执行操作，则使用 onload。