判断页面是否加载完成

最新推荐文章于 2020-08-04 09:44:23 发布

chengweng2602

最新推荐文章于 2020-08-04 09:44:23 发布

阅读量929

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3147332/blog/807042

版权

用document.onreadystatechange的方法来监听状态改变， 然后用document.readyState == “complete”判断是否加载完成 
    代码如下： 
    document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. 
    function subSomething() { 
        if(document.readyState == “complete”) //当页面加载状态 
        myform.submit(); //表单提交 
    } 
    页面加载readyState的五种状态 
    原文如下: 
    0: (Uninitialized) the send( ) method has not yet been invoked. 
    1: (Loading) the send( ) method has been invoked, request in progress. 
    2: (Loaded) the send( ) method has completed, entire response received. 
    3: (Interactive) the response is being parsed. 
    4: (Completed) the response has been parsed, is ready for harvesting. 
    翻译成中文为: 
    0 － （未初始化）还没有调用send()方法 
    1 － （载入）已调用send()方法，正在发送请求 
    2 － （载入完成）send()方法执行完成，已经接收到全部响应内容 
    3 － （交互）正在解析响应内容 
    4 － （完成）响应内容解析完成，可以在客户端调用了 注：如果要判断子页面是否加载完成，在子页面使用该方法，在判断加载完成后，调用父页面的方法通知父页面，然后执行父页面的动作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    </style>
    <script>
    window.onload=function(){
         alert(document.readyState)  //Completed
    }
    document.onreadystatechange = function(){  //当页面加载状态改变的时候执行这个方法.
        alert(document.readyState)   //Interactive
        if(document.readyState == "complete")    //当dom加载完成 
        alert(document.readyState)   //Completed
    } 
     alert(document.readyState)      //Loading
    </script>
</head>
<body>   
</body>
</html>

对于外部资源的应用有两个我们head里面常用的标签link和script

测试浏览器版本说明

Opera 11.51
Chrome 6.0.401.1
FF 3.6.23

a. link标签

link标签的静态支持

------个人定义的所谓 静态其实就是

Js代码

<link type="text/css" rel="stylesheet" href="****" />

1. IE 6/7/8/9多支持onload，

Opera支持onload

对于onreadystatechange事件，有两个状态readyState（loading,complete）

2. FF/Safari/Chrome不支持onload,

也不支持onreadystatechange

link标签的动态支持

------个人定义的所谓 动态是js去创建link标签

Js代码

<script type="text/javascript">
/*封装代码
*创建给定属性的html元素
*@param type ----创建元素的类型
*@param attrs ----属性集合
*@return elment -------带有给定属性的元素对象
*/
function createTag(type,attrs){
var element = document.createElement(type),
item ;
for(item in attrs){
//加上一层本地属性的判断
if(attrs.hasOwnProperty(item)){
element.setAttribute(item,attrs[item]);
}
}
return element;
}
var link = createTag('link',{
type : "text/css",
rel : "stylesheet",
href : "***"
});
link.onreadystatechange = function(){
//执行代码
}

Js代码

link.onload = function(){//执行代码}
document.getElementsByTagName('head')[0].appendChild(link);
</script>

1. IE 6/7/8/9支持onload和onreadystatechange

2. Opera也支持

3. FF/Chrome/Safai 不支持

b. script标签

script的静态支持

-----所谓的静态就是

Js代码

<script type="text/javascript" src="**"></script>

1. IE 6/7/8触发onreadystatechange

2. IE 9 先触发onreadystatechange 后触发onload

3. FF/Safari/Chrome/Opera 触发onload

script的动态支持

ie下的预加载

Js代码

window.onload = function(){
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.onreadystatechange = function(){
if(this.readyState == 'loaded'){
alert("preload");
document.getElementsByTagName("head")[0].appendChild(script);
}else if(this.readyState == "complete"){
this.onreadystatechange = null;
}
}
script.src="****jquery.min.js?_="+(new Date()).getTime();
}

转载于:https://my.oschina.net/u/3147332/blog/807042

chengweng2602

关注

0
点赞
踩
1

收藏

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

用document.onreadystatechange的方法来监听状态改变，然后用document.readyState == “complete”判断是否加载完成代码如下： document.onreadystatechange = subSomethin...
复制链接

扫一扫