当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jquery中的$(document).ready()与window.onload的区别

Javascript
Mootools 1.2教程 排序类和方法简介
Mootools 1.2 手风琴(Accordion)教程
Mootools 1.2教程 类(一)
Mootools 1.2教程 Tooltips
Mootools 1.2教程 选项卡效果(Tabs)
Mootools 1.2教程(21):类(二)
Mootools 1.2教程 同时进行多个形变动画
Mootools 1.2教程 滑动效果(Slide)
不安全的常用的js写法
javascript 检测浏览器类型和版本的代码
javascript 弹出层居中效果的制作
javascript 遮照层效果
Javascript createElement和innerHTML增加页面元素的性能对比
颜色快速采集器javascript代码
var与Javascript变量隐式声明
javascript 面向对象编程 万物皆对象
jQuery 事件队列调整方法
JavaScript switch case 的用法实例[范围]
控制input的CSS但不影响CheckBox以及Radio的样式
ext 同步和异步示例代码

Javascript 中的 jquery中的$(document).ready()与window.onload的区别


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 235 ::
收藏到网摘: n/a

浏览器执行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>"; }
);