$(document).ready、body.Onload()和 $(window).load的区别

时间  2019-11-11
标签 document ready body.onload body onload window load 区别 栏目 Windows 繁體版
原文   原文链接

JavaScript文档加载完成事件 

window.load(function(){...})和body.onload()都存在一样一个问题，那都是在页面全部元素(包括html标签以及引用到得全部图片,Flash等媒体)加载完毕后执行的,这是它们的共同点.$(document).ready()是文档结构已经加载完成（不包含图片等非文字媒体文件），没必要等到全部的加载完毕。javascript

原理是：css

$(document).ready(function (){ alert('use in page script tag') });
在jquery脚本加载的时候,会设置一个isReady的标记,监听DOMContentLoaded事件(这个不是什么浏览器都有的,不一样浏览器,jquery运做方式不同).固然遇到调用ready函数的时候,若是isReady未被设置,那就是说页面未加载完,就会把要执行的函数用一个数组缓存起来,当页面加载完后,再把缓存的函数一一执行.
另外补充：
jquery ready能够写好几个，每一个都执行 
onload只能写一个，你写好几个，也只执行一个，好像是执行最后一个，而$(window).load()能够加载多个函数html

 

用$(window).load(function(){...})而不用body.onload()的几个理由java

不用body.Onload()理由1：jquery

若是咱们想同时加载多个函数,咱们必须这样写数组

<body onload="fn1(),fn2()"></body>看起来极其丑陋,若是用$(window).load()咱们能够这样加载多个函数浏览器

 $(window).load(function() {
            alert("hello,我是jQuery!");
  });
 $(window).load(function() {
        alert("hello,我也是jQuery");
 });缓存

这样写它会从上往下执行这两个函数,而且看起来漂亮多了.cookie

不用body.Onload()理由2：闭包

用body.Onload()不可以作到js和html彻底分离,这是一个很严重的问题.

另外用$(window).load(function(){...})和body.onload()都存在一样一个问题,由于开始也说到了,它们都须要等到页面的全部内容

加载完毕才执行,可是若是当网速比较慢的时候,加载一个页面每每须要较长的时间(几秒到十几秒不等,甚至更长...),因此咱们常常

会遇到页面尚未彻底加载完毕而用户已经在操做页面了这种状况,这样页面表现出来的效果就跟咱们预期的效果不同了,

因此在这里我推荐使用$(document).ready(function(){}),或简写为$(function(){})，由于他会在页面的dom元素加载完毕后就执行,

而无需等到图片或其余媒体下载完毕.

可是有时候确实咱们有须要等到页面的全部东西都加载完后再执行咱们想执行的函数,因此是该使用$(window).load(function(){...})仍是

该使用$(function(){})每每须要结合具体须要而做不一样的选择.

最后附上一段在全部DOM元素加载以前执行的jQuery代码

<script type="text/javascript">

(function() {
            alert("DOM还没加载哦!");
        })(jQuery)

</script>

补充1：刷新也只执行一次

刷新后只让$(window).load(function(){...})和body.onload()都执行一次的方法，cookie中实现（以body.onload()举例，$(window).load也能够照样该）

function loadpopup(){ 
if (get_cookie('popped')==''){ 
//这里放要执行的代码，这样就现实了只执行一次的

document.cookie="popped=yes" ;
}
} 
</script>
</head> 
<body onload="loadpopup()">

补充2：调试技巧

为了调试方便，有时候在全部的DOM加载以前调用JS代码，这个方法是我在调试的时候最喜欢的，有时候开发的时候也用这种方法
<body>
    <script type="text/javascript">
        (function() {
            alert("hi");
        })(jQuery)
    </script>
</body>
对，就是利用js闭包的形式将js代码嵌入body，这段代码会自动执行，固然也能够直接嵌入js代码,这种方式要注意顺序问题，以下：
<body>
<div id="test">this is the content</div>
    <script type="text/javascript">

        alert($("#test").html());//I Can display the content
            </script>
</body>
<body>
   <script type="text/javascript">

        alert($("#test").html());//I Can't display the content
            </script>
    <div id="test">this is the content</div>
</body>
上面两段代码,第二段代码当中由于只能解释到当前代码以前的DOM,而test并不存在于已经解析的DOM中.因此第二段代码没法正确显示

补充3：非jquery中无$(document).ready方法

在 W3C 中有个叫 DOMContentLoaded 的事件, 故名思意, 它会在 DOM (文档对象模型) 被加载完成的时候触发. 那么咱们就能够经过下面的方法调用初始化脚本的方法了.

但很遗憾, 如今不少浏览器并不玩 W3C 这一套, 支持 DOMContentLoaded 事件的只有 Firefox, Opera 9 等一些 "现代" 浏览器, 而被集成到两大商业桌面系统的 IE 和 Safari 都不支持. 尽管如此, 咱们能够用别的一些方法进行处理.

方案一：

[html]  view plain copy
  1. if (document.addEventListener){   //非ie浏览器  
  2.        document.addEventListener("DOMContentLoaded", init, false);  
  3. } else if (document.attachEvent){   //ie浏览器  
  4.        document.onreadystatechange=function(){         if (this.readyState == 'complete') {           init();          }      }}  

方案二：

[html]  view plain copy
  1. // 若是支持 W3C DOM2, 则使用 W3C 方法  
  2. if (document.addEventListener) {  
  3.     document.addEventListener("DOMContentLoaded", init, false);  
  4.    
  5. // 若是是 IE 浏览器  
  6. } else if (/MSIE/i.test(navigator.userAgent)) {  
  7.     // 建立一个 script 标签, 该标签有 defer 属性, 当 document 加载完毕时才会被载入  
  8.     document.write('<script id="__ie_onload" defer src="javascript:void(0)"></script>');  
  9.     var script = document.getElementById("__ie_onload");  
  10.     // 若是文档确实装载完毕, 调用初始化方法  
  11.     script.onreadystatechange = function() {  
  12.         if (this.readyState == 'complete') {  
  13.             init();  
  14.         }  
  15.     }  
  16.    
  17. // 若是是 Safari 浏览器  
  18. } else if (/WebKit/i.test(navigator.userAgent)) {  
  19.     // 建立定时器, 每 0.01 秒检验一次, 若是文档装载完毕则调用初始化方法  
  20.     var _timer = setInterval( function() {  
  21.         if (/loaded|complete/.test(document.readyState)) {  
  22.             clearInterval(_timer);  
  23.             init();  
  24.         }  
  25.     }, 10);  
  26.    
  27. // 若是以上皆不是, 使用最坏的方法 (本例中, Opera 7 将会跑到这里来)  
  28. } else {  
  29.     window.onload = function(e) {  
  30.         init();  
  31.     }  
  32. }  


补充4：有window.onload，可是没有document.onload

[javascript]  view plain copy
  1. <script type="text/javascript">  
  2. <!--    
  3. function $(id)    
  4. {    
  5.     return document.getElementById(id);    
  6. }    
  7. function show()    
  8. {    
  9.     alert($("btn").value);    
  10.     if(document.attachEvent)    
  11.     alert("load");    
  12. }   
  13. document.attachEvent("onload",show);   
  14. //window.attachEvent("onload",show);  
  15. //window.onload=show;    
  16. //document.onload=show();    
  17.  -->  
  18.  </script>    
  19. <body >    
  20. <input type="button" value="button" id="btn">    
  21. <hr>    
  22. </body>  
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程