使用 JavaScript 中的 document.ready() 函数

在以往的 Web 开发中，我们经常在 JavaScript 代码中使用 window.onload 函数来保证在所有文档元素都加载完成后再执行 JavaScript 代码。但是，window.onload 函数在加载慢的情况下会等待所有图片和其他资源加载完成后才会执行，而这可能会影响网页的性能和用户体验。

为了解决这个问题，jQuery 提供了 $(document).ready() 函数，用于等待 DOM 树建立完成后再执行 jQuery 代码。同时，它也与其他 JavaScript 库进行更好的兼容性。

jQuery 中 document.ready() 的用法

在 jQuery 中，我们通常使用 $(document).ready(function(){}) 或 $(function(){}) 来执行代码。其中第二种写法其实是第一种写法的缩写，使用时需要注意两点：

1. 在第一种写法中，需要传入一个回调函数，在函数体内编写需要执行的代码。
2. 第二种写法是等效的，但不能传入回调函数。

例如：

$(document).ready(function(){
  // 在页面 DOM 完成后执行这里的代码
  console.log("DOM ready!");
});

$(function(){
  // 等效于 $(document).ready()，在页面 DOM 完成后执行这里的代码
  console.log("DOM ready with shortcut!");
});

JavaScript 中 document.readyState 的用法

在 JavaScript 中，我们可以使用 document.readyState 来判断当前页面的加载状态。当 document.readyState 为 "complete" 时，表示页面已经完全加载好了，我们可以在此时执行 JavaScript 代码。

使用方法：

// 原生 JavaScript 写法
if (document.readyState !== "loading") {
  // 在加载完成后执行这里的代码
  console.log("DOM ready!");
} else {
  document.addEventListener("DOMContentLoaded", function(){
    console.log("DOM ready!");
  });
}

上述代码中，我们首先通过 document.readyState 判断页面加载状态，并在页面已经加载完成的情况下执行代码。否则，我们添加一个 DOMContentLoaded 事件监听器，等待页面加载完成后再执行代码。

需要注意的是，这里使用的是原生 JavaScript 写法，不需要使用 jQuery 库。同时，在使用 document.readyState 时需要考虑兼容性，因为在某些旧版浏览器中可能无法正常工作。

综上，$(document).ready() 函数是比较通用的，而 document.readyState 是原生的 JavaScript 方法。在保证兼容性的同时，我们可以根据具体实际情况来选择使用不同的方法。