$(document).read() 与window.onload()

程序员文章站 2022-03-03 20:14:37

...

我们知道，$(document).ready()是jQuery用于在页面加载时执行任务的主要途径。然而，它并不是唯一听我们差遣的方法。window.onload()可以完成类似的效果。虽然二者是类似的，但理解它们在时间点上的不同很重要。

window.onload() 是当一个文档完全被下载到浏览器中时触发。这意味着，页面上的每个元素都准备好了，可以被js所操作。

另一方面，用 $(document).ready() 注册的事件处理器要当DOM完全可用时才调用。这也意味着所有的元素都可以被js访问了，但这并不意味着每一个关联的文件都已经下好了。当HTML文件下载好了并且被解析成DOM树，代码就可以运行了。

【样式加载与代码执行：要确保在 JS 代码执行之前页面已经运用了样式，在<head>元素中将<link rel="stylesheet">以及<style>标签放在<script>标签之前是个不错的实践。】

考虑一下，例如，某个展示一个图片集的页面；这样的页面可能会有一些大的图片，我们可以用jquery将它们隐藏、显示、移动、以及操作。如果用 onload 事件，用户就必须等所有的图片都下载完了才能使用这些特性。更糟糕的是，如果一些行为还没有被附加到那些拥有默认行为（例如链接）的元素上，用户交互就可以产生不希望的结果。然而，当我们用 $(document).ready()，行为就是正确的，而且可以更早被使用。

【What is loaded and what is not?：相对于 onload 处理器，我们一般优先用 $(document).ready()，但我们需要记住一点因为支持文件可能还没有加载，一些属性，例如图片的高和宽在这个时候是不可用的，如果确实需要的话，那还是应该要实现一个 onload 处理器（例如，就用 jQuery 向 load 事件绑定一个处理器）】

$(document).read() 与window.onload()

JQ中$(window).load和$(document).ready区别与执行顺序

详解pandas库pd.read_excel操作读取excel文件参数整理与实例

JQuery中window.onload函数与$(document).ready()的区别实例讲解

document.getElementsByName和document.getElementById 在IE与FF中不同实现

JQ中$(window).load和$(document).ready区别与执行顺序

详解pandas库pd.read_excel操作读取excel文件参数整理与实例

一张表格告诉你windows.onload()与$(document).ready()的区别

$(document).ready(function(){})与window.load

全面解析jQuery中的$(window)与$(document)的用法区别

（P4-P5）文件与IO：open、close、creat、read、write