$(document).ready()並不靠譜

時間 2019-11-14

標籤 document ready 並不靠譜简体版

原文原文鏈接

好多用過jQuery的朋友都爲jQuery的強大功能和易用性折服，有了jQuery菜鳥也能作javascript特效，有了jQuery高手寫代碼的效率會進一步提高。javascript

學習jQuery的第一課就是學會在編輯器裏敲上$(document),ready()，而後把全部要作的操做寫在這個方法下，由於若是不這麼寫的話咱們就可能看不到代碼發揮的效果，這是由於咱們所操做的元素還沒來得及加載到頁面就執行了操做。css

$(document),ready()可能會很差用，有時候第一次訪問頁面的時候這個方法下的操做並無執行，須要刷新一次纔會看到效果，這是爲何呢？html

其實雖然看似$(document),ready()與body的load屬性以及頁面的window.load功能同樣，但其實仍是有差異的，咱們用代碼作一個測試：java

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3     <head>
 4         <title> New Document </title>
 5         <script type="text/javascript" src="./jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
 6         <script type="text/javascript">
 7             var time=(new Date()).valueOf();
 8             window.onload=hehe('window.onload');
 9             hehe('head top');
10             function hehe(str){
11                 console.log((new Date()).valueOf()-time+'ms\t\t'+$('img').css('width')+'\t\t'+str);
12             }
13             $(document).ready(function(){
14                 hehe('head $(document).ready()');
15             });
16             hehe('head buttom');
17         </script>
18     </head>
19     <body onload="hehe('body onload')">
20         <script type="text/javascript">
21             hehe('body top');
22             $(document).ready(function(){
23                 hehe('body $(document).ready() over');
24             });
25         </script>
26         <img src="http://f1.bj.anqu.com/orgin/ZTgyYQ%3D%3D/allimg/120615/29-120615142929.jpg?"+(new Date()).valueOf()
27             onload="hehe('img onload')">
28         <script type="text/javascript">
29             $(document).ready(function(){
30                 hehe('body $(document).ready() under');
31             });
32             hehe('body buttom');
33         </script>
34     </body>
35 </html>

獲得的效果以下：jquery

如圖片中，console輸出以下：編輯器

 1 0ms        undefined        window.onload
 2 5ms        undefined        head top
 3 6ms        undefined        head buttom
 4 7ms        undefined        body top
 5 8ms        0px              body buttom
 6 17ms       0px              head $(document).ready()
 7 18ms       0px              body $(document).ready() over 
 8 18ms       0px              body $(document).ready() under
 9 313ms      1920px           img onload
10 314ms      1920px           body onload