本文详细解析jQuery中$(document).ready()与原生window.onload的执行时机差异。通过对比代码示例，说明$(document).ready()在DOM解析完成后立即执行，无需等待图片等外部资源加载，从而避免脚本依赖动态元素时可能出现的错误，并提供两种常用的jQuery简写实现方式。
页面加载时机与脚本错误问题
若页面包含图片或其他大型资源，加载耗时较长时，用户可能看到未渲染完整的页面。更严重的是，若脚本在图片加载前就尝试操作动态生成的元素，会因元素尚未就绪而引发脚本错误。
window.onload = function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">动态创建的div</div>"; }
jQuery $(document).ready() 解决方案
解决上述问题的方案是：在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>"; }
);