03-$(document).reay()

上山打老虎

页面载入
作者：曾庆林
jquery基础入门+实战系列教程

window.onload方法长久以来是程序员解决客户端页面载入问题的一个方法，只有少数大型的图片文件会被快速的载入，而大部分大型的图片文件会使window.onload()载入的很慢.
DOM 1.0 加载方式

window.onload=init;
function init(){
alert("abc");
}
window.onload=init2;
function init2(){
alert("123");
}

多次使用后面的方法会覆盖前面的方法
DOM 2.0 加载方式（W3C）

window.addEventListener("load",init,false);
function init(){
alert("abc")
}
window.addEventListener("load",init2,false);
function init2(){
alert(123);
}

不兼容早期的ie浏览器

ie早期版本加载方式

window.attachEvent("onload",init);
window.attachEvent("onload",init2);
function init(){
alert("abc")
}
function init2(){
alert(123);
}

兼容方式写法

function addEvent(elem,type,fn){
if(elem.addEventListener){
elem.addEventListener(type,fn,false);
}else if(elem.attachEvent){
elem.attachEvent("on"+type,fn);
}
}
addEvent(window,"load",init1);
addEvent(window,"load",init2);
function init1(){
alert("abc")
}
function init2(){
alert(123);
}

jQuery 页面加载写法

$(document).ready(function() {
});

简写

$(function(){
});

总结
标题window.onload$(document).ready()执行时机必须等待网页全部加载完毕（包括图片等），然后再执行包裹代码只需要等待网页中的DOM结构加载完毕，就能执行包裹的代码执行次数只能执行一次，如果第二次，那么第一次的执行会被覆盖可以执行多次，第N次都不会被上一次覆盖图片切换案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("p").slideToggle();
})
})
</script>
</head>
<body>
<button>切换</button>
<p><img src="images/1.gif" alt="" /></p>
</body>
</html>

[jQuery] 03-$(document).reay()

相关帖子

远程桌面连接报错:您的凭据不工作的终极解决办法

手写 Vue2 系列之编译器

linux系统创建主分区、逻辑分区、设置ext系列分区的参数以及检测分区的方法

为什么说 Gradle 是 Android 进阶绕不去的坎 —— Gradle 系列(1)

001 Android开发初体验

Android学习笔记——基础入门

从 WebAssembly 角度改进 WASI-NN | WASI-NN 系列文章2

了解下Foundation 按钮组

使用HTML/CSS/JS做一个恋爱计时小挂件

常用jquery右健禁止命令

上山打老虎 LV4