对于很多初学者来说,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()的区别的更多相关文章

  1. window.onload和$(document).ready()的区别

    window.onload和$(document).ready()的区别,如下表所示   window.onload $(document).ready() 执行时间 在页面所有内容(图片.文件)加载 ...

  2. window.onload和document.ready的区别

    window.onload和document.ready虽然两个方法的运行效果都一样,但他们之间是存在着区别的: 一.从执行的时间 window.onload在dom文档结构加载完毕以后就可以执行,不 ...

  3. window.onload 与 $(document).ready() 的区别

    以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件.在常规的 JavaScript 代码中,通常使用 window.onload 方法 ,而在 jQu ...

  4. 浏览器加载模式:window.onload和$(document).ready()的区别(详解)

    jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到. 在延迟等待加载,JavaScript提供了一个事件为load,方法如下: wind ...

  5. 【jQuery】window.onload 和 $(document).ready() 的区别

    ... 在Stack Overflow上看到了这个问题,自己翻译了过来. The onload event is a standard event in the DOM, while the read ...

  6. window.onload与document.ready的区别

    1. window.onload必须等到网页中所有的内容加载完(包含图片)才执行 document.ready网页中所有DOM结构绘制完执行,可能DOM并没有加载完 所有document.ready比 ...

  7. window.onload与$(document).ready()之区别

    1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2 ...

  8. window.onload()和$(document).ready的区别( $(document).ready == $(function(){ }) )

    首先$(function(){}) 和 $(document).ready(function(){}) 是一个方法,$(function(){})为简写(用的多) $(document).ready和 ...

  9. window.onload和$(document).ready(function(){})的区别

    前段时间在面试之前查找并整理了一下window.onload和$(document).ready(function(){})区别,今天有时间更到我的博客上,由于本人资历尚浅,如有不对的地方,还请指正. ...

随机推荐

  1. mysql主从

    1       系统规划 1.1     mysql版本 Mysql版本 mysql-5.5.51 1.2     服务器地址 服务器地址 10.180.2.167 1.3     mysql目录 主 ...

  2. 惊闻Java要收费之后

    今天看到朋友圈里的文章 <Oracle终于要向Java的非付费用户开枪了>,被这个标题吓了一跳,还以为Java要全面收费了.又被标题党骗了. 但是仔细想想,以Oracle公司的尿性,没准哪 ...

  3. Python 实现Windows开机运行某软件

    开机运行:随系统启动的应用程序,当系统启动之后会自动加载的应用 在注册表中添加启动项便可实现开机启动. 代码如下: # -*- coding:utf-8 -*- import win32api imp ...

  4. oracle函数简析

    (一).数值型函数(Number Functions) 数值型函数输入数字型参数并返回数值型的值.多数该类函数的返回值支持38位小数点,诸如:COS, COSH, EXP, LN, LOG, SIN, ...

  5. Windows安装程序 报错 “已安装了较新版本” 导致无法安装程序的解决方法

    打开注册表 HKEY_CURRENT_USER\Software\Microsoft\Installer\Products ,“查找”程序名称 如果有程序名和安装程序相同的 ,删除整个 项 ! 然后就 ...

  6. jQuery.lazyload

    Lazy Load延迟加载也有的称为惰性加载,是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它 ...

  7. .NET Web开发笔记

    HttpWebRequest HttpWebRequest默认关闭Cookies,给其赋初始值以打开Cookies读写 myRequest.CookieContainer = new CookieCo ...

  8. Proxy setting

    1. git git config --global http.proxy http://proxyuser:proxypwd@proxy.server.com:8080 2. gradleScena ...

  9. 使用git把项目提交到github

    1.需要在https://github.com/注册一个账户 2.注册成功后,新建一个repository,用来存放你要上传的项目,如下图所示 这里你需要输入你的项目的名称,可以对你的项目进行描述,如 ...

  10. 使用 pod install 还是 pod update ?

    翻译自:https://guides.cocoapods.org/using/pod-install-vs-update.html 介绍: 许多人开始使用CocodPods的时候认为pod insta ...