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

xst4002

浏览: 153761 次
性别:
来自: 武汉

最近访客更多访客>>

u012363178

tzk117

ln_mars

maituwang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

项目开发

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

分享到：

eclipse中的java文件图标j成空心 | document.readyState几种状态及示例

2012-06-29 14:35
浏览 9175
评论(0)
分类:研发管理
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

[转：]jQuery焦点中国地图

一个轻量级的网页遮罩层jQuery插件

通过Spring Mail Api发送邮件

jquery.validate

Hibernate commit() 和flush() 的区别(转)

maven3.0.2下settings.xml配置下(转)

hibernate中Qurey类的setDate方法自动截掉时分秒——setDate和setTimeStamp（转）

Maven3.0.3的环境变量配置

转：org.apache.catalina.core.JreMemoryLeakPreventionListener解决办法

eclipse中的java文件图标j成空心

jQuery - Ajax - readyState获取请求操作的当前状态

document.readyState几种状态及示例

DOM Ready 详解

转】js实现另存为的方法

js添加和去除千分号

Hibernate的游离态与持久态转换(转)

maven继承parent，relativePath warn信息的解决办法

使用Maven管理Eclipse Java项目

The parent project must have a packaging type of POM

(转)利用eclipse构建和部署maven工程

最近访客更多访客>>