原生JS与jQuery实现页面加载后执行代码的区别

原生JS与jQuery实现页面加载后执行代码的区别

实现页面加载后运行JavaScript代码主要有两种常用方式：

 
<script type="text/javascript">
window.onload=function(){
var userName="xiaoming";
alert(userName);
} 
</script>

若使用jQuery方法，则需先引入jQuery库文件。

 
<script type="text/javascript">
$(document).ready(function(){
var userName="xiaoming";
alert(userName);
}); 
</script>

此外，jQuery还提供了一种更简洁的简写形式：

 
$(function(){
var userName="xiaoming";
alert(userName);
}); 

该方法在DOM加载完成后即可执行，其触发时机早于window.onload。值得注意的是，在同一页面中可以多次调用.ready()方法，它们会按顺序执行。

window.onload与$(document).ready()核心差异分析

PS：两者的主要区别

window.onload：

该事件在文档完全下载到浏览器中时触发。这意味着页面上所有元素（包括图片、样式等）均已加载完毕，JS才能操作所有元素。这种机制对编写功能性代码非常有利，因为无需担心资源加载的先后顺序。

$(document).ready{ }：

该方法在DOM结构完全就绪且可被访问时调用。虽然此时所有HTML元素已解析为DOM树，脚本可以访问它们，但并不意味着所有关联的外部文件（如图片、CSS）都已下载完毕。换句话说，只要HTML下载完成并解析为DOM树，代码就会立即执行。

举一个例子：

假设有一个展示图库的页面，其中包含大量大型图像。如果使用onload设置界面交互，用户必须等待所有图像下载完成后才能使用页面。更糟糕的是，如果给具有默认行为（如链接）的元素添加行为，可能会因资源未加载完导致意想不到的结果。而使用$(document).ready(){ }设置时，界面行为会更早地准备好并可正确响应。

通常情况下，使用$(document).ready(){ }优于使用onload事件处理程序。但必须明确一点：由于外部支持文件（如图片）可能尚未加载完成，此时获取图像的高度、宽度等属性可能无效。

注：将JS脚本放在页面底部或使用defer="defer"属性的方法均可能存在兼容性问题或执行顺序问题。建议优先使用上述函数封装代码。