js判断页面是否加载完成

最新推荐文章于 2024-03-25 09:00:06 发布

ForMyWebFrontSide

最新推荐文章于 2024-03-25 09:00:06 发布

阅读量1.7k

点赞数

分类专栏： javascript JQuery

javascript 同时被 2 个专栏收录

111 篇文章 1 订阅

订阅专栏

JQuery

36 篇文章 0 订阅

订阅专栏

通过用document.onreadystatechange的方法来监听状态改变，然后用document.readyState == “complete”判断是否加载完成。
可以采用2个div，其中一个在前面，一个在后面，前面的先显示，里面放一个页面正在加载中的小图片，小flash都可以。

后面的div开始加载内容，在页面上随时监测加载是否完毕，如果加载完毕，将前面的div隐藏，后面的div提到前面来即可。

document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法.
function subSomething()
{
if(document.readyState == “Loaded”) //当页面加载状态
{
　　//Load提示第一个div隐藏掉
　　//将Html显示
}

页面加载readyState的五种状态原文如下:

0: (Uninitialized) the send( ) method has not yet been invoked.
0 －（未初始化）还没有调用send()方法
1: (Loading) the send( ) method has been invoked, request in progress. .
1 －（载入）已调用send()方法，正在发送请求

2: (Loaded) the send( ) method has completed, entire response received.
2 －（载入完成）send()方法执行完成，已经接收到全部响应内容

3: (Interactive) the response is being parsed. 4: (Completed) the response has been parsed, is ready for harvesting.
3 －（交互）正在解析响应内容

4: (Completed) the response has been parsed, is ready for harvesting.

（完成）响应内容解析完成，可以在客户端调用了

===================================================================

http://xst4002.iteye.com/blog/1570992

http://www.jquerycn.cn/a_11412

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>

ForMyWebFrontSide

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js判断页面是否加载完成

通过用document.onreadystatechange的方法来监听状态改变，然后用document.readyState == “complete”判断是否加载完成。可以采用2个div，其中一个在前面，一个在后面，前面的先显示，里面放一个页面正在加载中的小图片，小flash都可以。后面的div开始加载内容，在页面上随时监测加载是否完毕，如果加载完毕，将前面的div隐藏，后面的d
复制链接

扫一扫

专栏目录