页面加载完成后再执行JS的jquery写法以及区别说明

在网页中，我们经常需要在页面加载完成后再执行一些 JavaScript 代码。这个需求非常普遍，比如我们需要在 DOM 树构建完成后再去操作元素，或者需要等待图片等资源加载完成后再进行后续的逻辑处理。在这种需求下，我们可以使用 JQuery 提供的 ready() 方法来处理，同时，使用 ready() 方法还有一定的性能优势。下面是详细的攻略：

什么是 jQuery.ready()?

jQuery.ready() 方法是 jQuery 提供的一种特殊的方法，用于在页面 DOM 结构准备好之后立即执行 JavaScript 代码。此时，所有的 DOM 树结构都已经构建完毕，但是可能不包含图片等资源。ready() 方法与 window.onload 方法有相似的作用，但不同的是 jQuery 生命周期函数等待的是页面 DOM 树结构的构建，而 onload 事件确保所有的资源都已经加载完成。

ready() 方法的使用方法

ready() 方法可以直接用于文档对象上，以便在页面 DOM 树结构构建完成后立刻执行 JavaScript 代码。下面是一个简单的 ready() 方法的使用示例：

$(document).ready(function() {
  // DOM 树结构构建完成后立刻执行此函数体中的代码
});

在上面的例子中，我们通过 jQuery 选择器获取文档对象，并为其注册 ready() 事件的回调函数。当 DOM 文档结构准备好之后，ready() 方法会触发注册的回调函数，从而执行业务逻辑代码。

如果您希望使用简洁的语法来绑定 ready() 事件，可以参考下面的代码：

$(function() {
  // DOM 树结构构建完成后立刻执行此函数体中的代码
});

当然，这两种语法的作用是完全相同的，区别仅在于语法的简洁度和可读性。

使用 $(window).on('load', function() {}) 的区别

除了 ready() 方法以外，还有一种常见的等待页面元素加载完成的方法，那就是使用 window.onload 事件。当然，我们也可以使用 jQuery 提供的相应事件绑定方法，即：$(window).on('load',callback)。二者的区别是什么呢？

window.onload 事件确保所有的资源都已经加载完毕后才执行回调函数，相对来说，它的缺点就是等待的时间可能比较长，可能会给用户造成“卡顿”的感觉。而 ready() 方法的话，它也能够确保 DOM 结构已经构建完成，但是在资源加载完成之前就可以在页面上操作一些东西，提高了用户体验度。

同时，$(window).on('load', function() {}) 与 ready() 方法有一个明显的不同点在于触发时刻。window.onload 事件只在所有元素都加载完成之后才会触发，而 ready() 方法则是在 DOM 树构建完成之后就会触发。

举例说明

$(document).ready(function(){
    console.log("DOM树构建完毕后，立即执行此处代码！");
});
$(window).on('load', function() {
    console.log("页面全部资源加载完毕后执行此处代码！");
});

假设当前页面内容过多，单纯使用 $(document).ready() 可能会造成页面“卡顿”的情况，因此完美的解决方案应该是结合 “DOM树构建完毕后，立即执行此处代码！”和“页面全部资源加载完毕后执行此处代码！”这两种方法。可以这么理解，document.ready() 用来对页面DOM树构建完成之后需要立即执行的代码做什么，$(window).on('load', …) 页面资源加载完毕时需要执行的代码做什么。