jQuery的domReady

 
<!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(document.getElementById("test").innerHTML)
      });

      window.onload = function(){
        alert("這是onload事件! load")
      };
    </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>

    <p id="test">我們添加了些圖片與表格延緩頁面的加載速度 -------------------------</p>
    <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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章