window.onload与$(document).ready()的区别
对于很多初学者来说，window.onload出现在代码中的频率非常高，这似乎变成了一种习惯，可是并不知道具体为什么要加这句代码，可以做几个试验对比：
实验一：
<script>
document.getElementById("me").style.color = "blue";
</script>
<body>
<h1 id="me">大宝章 is Double Zhang</h1>
</body>
实验结果是 h1字体为原始黑色，并没有被渲染为蓝色，原因是document文档是从上向下解析执行，当执行到script时，body中的h1还未被执行和加载到网页中，这时候 document.getElementById("me") 并没有获取到h1对象，就更不存在将它的字体设置为蓝色了。
------------------------------------------------------------------------------------------------------------
实验二：
<body>
<script>
document.getElementById("me").style.color = "blue";
</script>
<h1 id="me">大宝章 is Double Zhang</h1>
</body>
实验结果字体为原始的黑色，可以很好的解释“document文档是从上向下解析执行”，当执行script时，h1仍旧没有被加载。
------------------------------------------------------------------------------------------------------------
实验三：
<body>
<h1 id="me">大宝章 is Double Zhang</h1>
<script>
document.getElementById("me").style.color = "blue";
</script>
</body>
实验结果字体为蓝色，终于渲染成功，从上而下万年不变的真理啊。
------------------------------------------------------------------------------------------------------------
实验四：
<script>
window.onload = function(){
document.getElementById("me").style.color = "blue";
}
</script>
<body>
<h1 id="me">大宝章 is Double Zhang</h1>
</body>
相比实验一添加了神器window.onload,字体为蓝色。这里有必要解释一下window.onload了，它表示网页完成了加载，包括DOM树的创建、网页中图片等外部资源的加载。window.onload=function(){这里的代码将在网页加载完成以后执行}，这就是为什么实验四能够成功渲染蓝色字体，因为body里的内容已经加载完成，h1已经存在，才执行了颜色设置。
这里有一个隐患，当页面中需要加载的文件非常多（如图片），window.onload里面的代码就迟迟无法执行，将带来很差的用户体验。
------------------------------------------------------------------------------------------------------------
实验五：
<script>
setTimeout(function(){
document.getElementById("me").style.color = "blue";
},3000);
</script>
<body>
<h1 id="me">大宝章 is Double Zhang</h1>
</body>
字体成功渲染为蓝色，因为做了一个定时器的延时3秒，在这3秒里，页面完成了加载工作，h1已经建立好，再添加颜色就没问题了，但是运行会看到字体会闪一下，闪之前为黑色，闪之后变为红色，因为页面刚加载好，h1默认呈现黑色，三秒时变为红色。
这也是一种方法，但是我们并不提倡，因为我们无法把握页面加载完成的准确时间，就意味着我们不能避免“闪一下”的问题，并且，setTimeout设置的延迟时间如果小于页面加载的时间，字体也不会渲染为蓝色。
-----------------------------------------------------------------------------------------------
实验六：
<script>
$(document).ready(function(){
document.getElementById("me").style.color = "blue";
});
</script>
<body>
<h1 id="me">大宝章 is Double Zhang</h1>
</body>
字体成功渲染蓝色！wuli jQuery的ready方法，就是在DOM树创建完成后（HTML解析的第一步）就触发，无需等待页面中其他资源（图片等）的加载，成功解决了实验四中的隐患。
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
自己模拟一个jQuery的ready方法：
function myReady(fn){
//利用能力检测区分浏览器
if(document.addEventListener){
document.addEventListener("DOMContentLoaded",fn,false);
}
else{ //这里是IE低版本浏览器
IEContentLoaded(fn);
}
//IE模拟DOMContentLoaded
function IEContentLoaded(fn){
var d = document.window;
//保证fn回调函数只执行一次
var done = false;
var init = function(){
if(!done){
done = true;
fn();
}
}
(function(){
try{
//DOM树未创建前调用doScroll会抛出异常
d.documentElement.doScroll('left');
}
catch(e){
//arguments.callee指向这个即可执行的(function(){})();
//没有捕获异常意味着DOM成功创建，就可以执行回调函数了
setTimeout(arguments.callee,60);
return;
}
})();
//监听document的加载状态
d.onreadystatechange = function(){
if(d.readyState == 'complete'){
d.onreadyState == null;
init();
}
}
}
}
window.onload与$(document).ready()的区别的更多相关文章
- window.onload和$(document).ready()的区别
window.onload和$(document).ready()的区别,如下表所示 window.onload $(document).ready() 执行时间 在页面所有内容(图片.文件)加载 ...
- window.onload和document.ready的区别
window.onload和document.ready虽然两个方法的运行效果都一样,但他们之间是存在着区别的: 一.从执行的时间 window.onload在dom文档结构加载完毕以后就可以执行,不 ...
- window.onload 与 $(document).ready() 的区别
以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件.在常规的 JavaScript 代码中,通常使用 window.onload 方法 ,而在 jQu ...
- 浏览器加载模式：window.onload和$(document).ready()的区别(详解)
jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到. 在延迟等待加载,JavaScript提供了一个事件为load,方法如下: wind ...
- 【jQuery】window.onload 和 $(document).ready() 的区别
... 在Stack Overflow上看到了这个问题,自己翻译了过来. The onload event is a standard event in the DOM, while the read ...
- window.onload与document.ready的区别
1. window.onload必须等到网页中所有的内容加载完(包含图片)才执行 document.ready网页中所有DOM结构绘制完执行,可能DOM并没有加载完 所有document.ready比 ...
- window.onload与$(document).ready()之区别
1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2 ...
- window.onload()和$(document).ready的区别（ $(document).ready == $(function(){ }) ）
首先$(function(){}) 和 $(document).ready(function(){}) 是一个方法,$(function(){})为简写(用的多) $(document).ready和 ...
- window.onload和$(document).ready(function(){})的区别
前段时间在面试之前查找并整理了一下window.onload和$(document).ready(function(){})区别,今天有时间更到我的博客上,由于本人资历尚浅,如有不对的地方,还请指正. ...
随机推荐
- Spring学习（三）
1,Spring的事务管理机制 Spring事务管理高层抽象主要包括3个接口,Spring的事务主要是由他们共同完成的: l PlatformTransactionManager:事务管理器-主要用于 ...
- pygame学习笔记
pygame参考文档pdf版:pygame API html版 pygame API 石头剪子布的简单小游戏,待改进的地方,自适应大小.感兴趣的小伙伴可以依据get_surface()返回值(即当前窗 ...
- IIS配置域用户自动登录
1.首先确定IIS所在计算机是否已添加到域中:右击计算机->属性,在计算机名称,域,工作组设置中可看到计算机所在的域,若没有,可点击更改设置,再点击更改,选择要绑定的域即可(需要用域账户登录). ...
- JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码
基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...
- Android开发之Java集合类性能分析
对于Android开发者来说深入了解Java的集合类很有必要主要是从Collection和Map接口衍生出来的,目前主要提供了List.Set和 Map这三大类的集合,今天Android吧(ard8. ...
- UWP学习记录8-设计和UI之控件和模式5
UWP学习记录8-设计和UI之控件和模式5 1.日历.日期和时间控件 日期和时间控件提供了标准的本地化方法,可供用户在应用中查看并设置日期和时间值. 有四个日期和时间控件可供选择,选择的依据如下: 日 ...
- linux进程通信
e14: 进程间通信(进程之间发送/接收字符串/结构体): 传统的通信方式: 管道(有名管道 fifo,无名管道 pipe) 信号 signal System V(基于IPC的对象): ...
- Puppet自动化运维-资源介绍篇（4）
1.什么是资源? 资源是Puppet最基础的元素,每个资源的定义都具有标题,类型,以及一系列的属性. 资源定义有如下的特性: (1) Puppet使用title在编译时区分每个资源,使用命名变量在 ...
- XVII Open Cup named after E.V. Pankratiev. GP of SPb
A. Array Factory 将下标按前缀和排序,然后双指针,维护最大的右边界即可. #include<cstdio> #include<algorithm> using ...
- 从一个控制器调到另一个控制器的[UIViewController _loadViewFromNibNamed:bundle:]崩溃
一,现象和分析: 1.崩溃的主要地方是[UIViewController _loadViewFromNibNamed:bundle:] ,是从 A 控制器 push 到 B 控制器后, B 控制器的v ...