$(document).ready(...) 和 window.onload 的区别

Posted 2020-09-16 周娟娟

$(document).ready(...) 和 window.onload：事件虽然具有类似的效果，但是，它们在触发操作的时间上存在着微妙的差异。

    1.window.onload：
      当一个文档完全下载到浏览器中时，会触发 window.onload 事件。这意味着页面上的全部元素对 javascript 而言都是可以访问的，这种情况对编写功能性的代码非常有利，因为无需考虑加载的次序。

    2.$(document).ready()：
      通过 $(document).ready() 注册的事件处理程序，则会在 DOM 完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的，但是，缺不意味着所有关联的文件都已经下载完毕。换句话说，当 html 下载完成并解析为 DOM 树之后，代码就可以运行。所有包括在$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载，并且在页面内容加载之前。使用 $(document).ready()，你能让你的事件在window加载之前加载或触发。所有你写在这个方法里面的都准备在最早的时刻加载或触发。也就是说，一旦DOM在浏览器中注册后，$(document).ready()里的代码就开始执行。这样用户在第一眼看见页面元素时，特效就可以运行了。

    简洁归纳为：
        window.onload：文档和所有关联的外部文件已经全部下载下来了。
        $(document).ready()：文档已经下载，但所有关联的外部文件则不一定已经全部下载下来了。