jQuery中$(document).ready()与window.onload的区别及用法

页面加载时机与脚本错误问题

若页面包含图片或其他大型资源，加载耗时较长时，用户可能看到未渲染完整的页面。更严重的是，若脚本在图片加载前就尝试操作动态生成的元素，会因元素尚未就绪而引发脚本错误。

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>"; }
);