jquery中的$(document).ready()与window.onload的区别-优快云博客

本文介绍了浏览器如何执行window.onload函数，并探讨了当DOM构建完成但外部资源未完全加载时可能出现的问题。通过使用jQuery的$(document).ready()方法或其简化语法，可以确保DOM准备就绪时即执行指定函数，从而提高页面加载效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器执行window.onload函数不仅仅是在构建完DOM树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后. 所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误.

window.onload = function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">动态创建的div</div>"; }

解决办法就是等DOM被解析后, 在图像和外部资源加载之前执行我们的函数.在jQuery中让这一实现变得可行:

//jQuery 使用动态创建的$(document).ready(function)方法
$(document).ready(
function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">使用动态创建的$(document).ready(function)方法</div>"; }
);
//或者使用简便语法:
/jQuery 使用$(function)方法
$(
function() { testDiv.innerHTML += "<div style=\"border:solid 1px #FF0000\">使用$(function)方法</div>"; }
);

转载于:https://www.cnblogs.com/yangruipretty/archive/2009/11/18/1605433.html