javascript的domReady

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

基本上每個庫都有這東西，因為如果要對頁面上的元素進行操作，我們必須等到頁面載入了這個元素才行，否則會報錯，但是我們很能判定某個元素是否已載入，但我們可以判定頁面是否載入，這就是我們經常把代碼放到window.onload = function(){}之中的緣由。但window.onload事件是待到頁面上的所有資源被載入才啟用，如果頁面上有許多圖片，音樂或falsh，而我們要操作的元素在的它們的下方呢？因此，W3C做了少有幾樁好事，搞了DOMContentLoaded與addEventListener，可能也不是他們搞的，把某瀏覽器的私人實現蓋上個大印，標明它是標準罷了，如safari的canvas，IE的getBoundingClientRect……DOMContentLoaded是DOM樹完成時啟用的事件，addEventListener支援多重載入與冒泡捕獲。IE沒有這東西，我在《javascript的事件載入》基本給出它的雛形了（註：昨天重寫了該文），本文將在它的基礎上進行進一步的封裝與改進，如setTimeout改為零秒延遲，清除setTimeout，執行完載入後把載入函數清除掉，對IE架構結構的頁面進行更安全的設定……最重要的是修正下面網友 wbkt2t 提到的在IE中的失誤！。晚上再次更新，發現doScroll並沒有想象中的快，比不上script defer……

IE6的資料：

IE8的資料：

綜合執行順序為：

oncontentready，這時DOM樹完成
script defer，這時開始執行設定了defer屬性的script
ondocumentready complete，這時可以使用HTC組件與XHR
html.doScroll 這時可以讓HTML元素使用doScroll方法
window.onload 這時圖片flash等資源都載入完畢

      new function(){        dom = [];        dom.isReady = false;        dom.isFunction = function(obj){          return Object.prototype.toString.call(obj) === "[object Function]";        }        dom.Ready = function(fn){          dom.initReady();//如果沒有建成DOM樹，則走第二步，儲存起來一起殺          if(dom.isFunction(fn)){            if(dom.isReady){              fn();//如果已經建成DOM，則來一個殺一個            }else{              dom.push(fn);//儲存載入事件            }          }        }        dom.fireReady =function(){          if (dom.isReady)  return;          dom.isReady = true;          for(var i=0,n=dom.length;i<n;i++){            var fn = dom[i];            fn();          }          dom.length = 0;//清空事件        }        dom.initReady = function(){          if (document.addEventListener) {            document.addEventListener( "DOMContentLoaded", function(){              document.removeEventListener( "DOMContentLoaded", arguments.callee, false );//清除載入函數              dom.fireReady();            }, false );          }else{            if (document.getElementById) {              document.write("<script id=\"ie-domReady\" defer='defer'src=\"//:\"><\/script>");              document.getElementById("ie-domReady").onreadystatechange = function() {                if (this.readyState === "complete") {                  dom.fireReady();                  this.onreadystatechange = null;                  this.parentNode.removeChild(this)                }              };            }          }        }      }

使用方法：

      dom.Ready(function(){        alert("我的domReady！")      });      dom.Ready(function(){        alert("我的domReady測試多重載入1！")      });      dom.Ready(function(){        alert("我的domReady測試多重載入2!")      });      dom.Ready(function(){        alert(document.getElementById("test").innerHTML)      });

<!doctype html> <html dir="ltr" lang="zh-CN"> <head id="head"> <meta charset="utf-8"/> <title>jQuery的domReady </title> <script type="text/javascript"> new function(){ dom = []; dom.isReady = false; dom.isFunction = function(obj){ return Object.prototype.toString.call(obj) === "[object Function]"; } dom.Ready = function(fn){ dom.initReady();//如果沒有建成DOM樹，則走第二步，儲存起來一起殺 if(dom.isFunction(fn)){ if(dom.isReady){ fn();//如果已經建成DOM，則來一個殺一個 }else{ dom.push(fn);//儲存載入事件 } } } dom.fireReady =function(){ if (dom.isReady) return; dom.isReady = true; for(var i=0,n=dom.length;i<n;i++){ var fn = dom[i]; fn(); } dom.length = 0;//清空事件 } dom.initReady = function(){ if (document.addEventListener) { document.addEventListener( "DOMContentLoaded", function(){ document.removeEventListener( "DOMContentLoaded", arguments.callee, false );//清除載入函數 dom.fireReady(); }, false ); }else{ if (document.getElementById) { document.write("<script id=\"ie-domReady\" defer='defer'src=\"//:\"><\/script>"); document.getElementById("ie-domReady").onreadystatechange = function() { if (this.readyState === "complete") { dom.fireReady(); this.onreadystatechange = null; this.parentNode.removeChild(this) } }; } } } } dom.Ready(function(){ alert("我的domReady！") }); dom.Ready(function(){ alert("我的domReady測試多重載入1！") }); dom.Ready(function(){ alert("我的domReady測試多重載入2!") }); dom.Ready(function(){ alert(document.getElementById("test").innerHTML) }); window.onload = function(){ alert("這是onload事件！") }; </script> </head> <body> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" alt="圖片1" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" alt="圖片2" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s007.jpg" alt="圖片3" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg" alt="圖片4" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg" alt="圖片5" /> <table class="filament_table" cellspacing="0" width="700" rules="cols" > <col class="grey" width="25%"></col> <col class="yellow"></col> <thead> <tr> <th> 參數 </th> <th> 描述 </th> </tr> </thead> <tbody> <tr> <td> scrollbarDown </td> <td> Default. Down scroll arrow is at the specified location </td> </tr> <tr> <td> scrollbarHThumb </td> <td> Horizontal scroll thumb or box is at the specified location </td> </tr> <tr> <td> scrollbarLeft </td> <td> Left scroll arrow is at the specified location </td> </tr> <tr> <td> scrollbarPageDown </td> <td> Page-down scroll bar shaft is at the specified location </td> </tr> <tr> <td> scrollbarPageLeft </td> <td> Page-left scroll bar shaft is at the specified location </td> </tr> <tr> <td> scrollbarPageRight </td> <td> Page-right scroll bar shaft is at the specified location </td> </tr> <tr> <td> scrollbarPageUp </td> <td> Page-up scroll bar shaft is at the specified location </td> </tr> <tr> <td> scrollbarRight </td> <td> Right scroll arrow is at the specified location </td> </tr> <tr> <td> scrollbarUp </td> <td> Up scroll arrow is at the specified location </td> </tr> <tr> <td> scrollbarVThumb </td> <td> Vertical scroll thumb or box is at the specified location </td> </tr> <tr> <td> down </td> <td> Composite reference to scrollbarDown </td> </tr> <tr> <td> left </td> <td> Composite reference to scrollbarLeft </td> </tr> <tr> <td> pageDown </td> <td> Composite reference to scrollbarPageDown. </td> </tr> <tr> <td> pageLeft </td> <td> Composite reference to scrollbarPageLeft. </td> </tr> <tr> <td> pageRight </td> <td> Composite reference to scrollbarPageRight. </td> </tr> <tr> <td> pageUp </td> <td> Composite reference to scrollbarPageUp. </td> </tr> <tr> <td> right </td> <td> Composite reference to scrollbarRight. </td> </tr> <tr> <td> up </td> <td> Composite reference to scrollbarUp. </td> </tr> </tbody> </table> 我們添加了些圖片與表格延緩頁面的載入速度 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg" alt="圖片1" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="圖片2" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="圖片3" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="圖片4" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="圖片5" /> </body> </html>

運行代碼

以下，更新前一些有用的東西，捨不得丟棄，暫時還留著。

用於判定是否為頂層window：

      //方法一      var topwindow = self === self.top      //方法二      var topwindow = false;      try {        topwindow = window.frameElement == null;      } catch(e){}

推薦第一種，第二種必須要待到document.body形成之時才能用，有關frameElement 的資料詳見這裡與這裡。 frameElement要求當前window是一個 frame 或 iframe才存在，否則返回null。不過第一種要注意一下，在IE 下，top, self, parent 和對應的 window 並不全等。見下面測試：

alert(window === window.top); // 應該為true alert(self === self.top); // 應該為true alert(self === window.top); // 應該為true alert(self === window); // 應該為true alert(window == window.top); // 應該為true alert(typeof self === typeof window); // 應該為true alert(self == window); // 應該為true

運行代碼

一些有用的連結：

http://p2b.jp/200805-events-order

http://tanny.ica.com/ICA/TKO/test.nsf/DOMContentLoaded.htm

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More