Dom加载判断，兼容所有浏览器

Dom 加载完毕，兼容所有浏览器

Firefox2、Firefox3、Safari3.1+、Opera9.6+ 浏览器都能很好的支持，但 IE6、IE7 却不支持。

IE6、IE7 我们可以使用 js.onreadystatechange 来跟踪每个状态变化的情况（一般为 loading 、loaded、interactive、complete）

当返回状态为 loaded 或 complete 时，则表示加载完成，返回回调函数。
Opera 支持 onreadystatechange

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd ">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
         <script language="JavaScript" type="text/javascript">
   if(document.attachEvent){
　　　　document.onreadystatechange=function(){
                  if(document.readyState == 'loaded'||document.readyState=="complete"||document.readyState=='interactive'){
                   document.getElementById("imgdivid").style.display="none";
                  Start();
                 }
　　　　};
　　}
　　else{
                     document.addEventListener("DOMContentLoaded",Start,false);   //非IE
　　}
　　function Start(){
　　　　alert("document.readyState=" + document.readyState + "\nYes,I'm running");
　　}//]]>

  </script>
    </head>
    <body>
        <div align="center" id="imgdivid">
            <img src="wait.gif">
        </div>
    </body>
</html>

上面的代码若果不好，你可以封装自己的包里底下是我写的类

dload2.js

/**
* @author duping
* Administrator
*/
var duduppp=function(){

           function domReady(){
    var arr=new Array();
      if(arguments.length>0){
          for (var i = 0; i < arguments.length; i++) {
       arr[i]= arguments[i];
     }
      }
                   if(document.all){

          document.onreadystatechange=function(){
      /*document.readyState=="complete"||document.readyState=='interactive'
       * 这样写会加载2次，先加载interactive 之后再加载complete
       * 如过要求效率的话写成interactive, opera 没有反应，opera 没有interactive 直接到complete
       * 所以另写了
       */
      if(document.readyState=='loaded'||document.readyState=="complete"){
      // alert(arr[0]+"------------IE--------------------");
       Start(arr);

                           }
      }
       }
       else{
       // alert(arr[0]+"------------NO--IE--------------------");
          document.addEventListener("DOMContentLoaded",Start(arr),false);
      }
      function Start(arr){
    for(var i=0;i<arr.length;i++){
     if(typeof arr[i]=='function'){
      arr[i]();
     }
    }
            }

            }

      return {domReady:domReady
               }
           }();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd ">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
  <script language="JavaScript" type="text/javascript" src="js/dload2.js"></script>
        <script language="JavaScript" type="text/javascript">
           function test1(){
     var name=document.getElementById("name").value;
     alert("my method is right"+name);
     }
     function test2(){
     alert("生活需要激情！");
     }
            duduppp.domReady(test1,test2);

        </script>
    </head>
    <body>
    <input type="text" id="name" value="1234">
    </body>
</html>

转自:http://hi.baidu.com/duduppp/blog/item/a2fb4ad43849c313a18bb795.html

Dom加载判断，兼容所有浏览器

猜你喜欢