js中常用方法以及document.readyState 判断页面是否加载完成 complete和interactive

JavaScript07

js中常用方法以及document.readyState 判断页面是否加载完成 complete和interactive,第1张

js中常用方法以及document.readyState 判断页面是否加载完成 complete和interactive

传回XML 文件资料的目前状况。   基本语法 intState = xmlDocument.readyState  说 明 这个属性是只读的,传回值有以下的可能: 0-UNINITIALIZED:XML 对象被产生,但没有任何文件被加载。 1-LOADING:加载程序进行中,但文件尚未开始解析。 2-LOADED:部分的文件已经加载且进行解析,但对象模型尚未生效。 3-INTERACTIVE:仅对已加载的部分文件有效,在此情况下,对象模型是有效但只读的。 4-COMPLETED:文件已完全加载,代表加载成功。     范 例 alert("The readyState property is " + xmlDoc.readyState)

1.窗口关闭时执行的函数 window.onbeforeunload = function(){}

2.页面加载情况判断document.readyState值可以是complete和interactive

function document.onreadystatechange() { if(document.readyState=="complete") alert(document.readyState)}

或者:

document.onreadystatechange = init

function init() {

if(document.readyState=="complete") {.........}

}

3.屏蔽右键功能和严禁选中操作

//document.oncontextmenu=new Function("event.returnValue=false")

//document.onselectstart=new Function("event.returnValue=false")

4.鼠标位置判断

window.event.y和window.event.x //x,y是鼠标相对于当前浏览器的位置

window.event.screenY和window.event.screenX //screenX,screenY是相对于用户显示器的位置

window.event.clientY和window.event.clientX //clientX, clientY是鼠标当前相对于网页的位置,

window.event.offsetY和window.event.offsetX //offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置,当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0;

5.窗口大小判断

document.documentElement.scrollWidth和document.documentElement.scrollHeight //获取窗口的宽和高

6.返回值

window.event.returnValue="真的要关闭吗" //弹出一个确认信息,确认事件是否要执行

return confirm("真的要关闭吗") //两个是一样的功能

7.获取随机数 parseInt(Math.random()*100) //获取1至100之间的随机数

通过用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.

(完成)响应内容解析完成,可以在客户端调用了

如果是纯文字内容的话可以不用管文档加载到哪里了就加载完成了

如果div下面有图片的话(img标签就需要进行判断了)

这里给出一份演示代码

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<div id="d">

<div id="loading">正在加载。。。</div>

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494214281262&di=ef0111cb95c5477f2dfc94acad9185dd&imgtype=0&src=http%3A%2F%2Fh5.86.cc%2Fwalls%2F20141217%2F1440x900_23b73a6904487a6.jpg">

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494214281262&di=d9369e8911c7ad7f74ca4427bdbfed51&imgtype=0&src=http%3A%2F%2Fpic10.nipic.com%2F20100929%2F4308872_150108084472_2.jpg">

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494214281262&di=87878630fa4786df3cdf8b09d8ec0d61&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2013%2Fmxy%2F12%2F11%2F4%2F3.jpg">

</div>

<script type="text/javascript">

var div=document.getElementById("d")

function OnLoadElement(e){

var img= e.getElementsByTagName("img")

var num=0

if(img.length<=0){

return 1

}

for(var i=0i<img.lengthi++){

(function(j){

if(!img[j].complete){

img[j].onload=function(){

num++

console.log("已经加载图片:"+num+"/"+img.length)

if(num==img.length){

document.getElementById("loading").style.display="none"

console.log("内容加载完成")

}

}

}else{

num++

console.log("已经加载图片:"+num+"/"+img.length)

if(num==img.length){

document.getElementById("loading").style.display="none"

console.log("内容加载完成")

}

}

})(i)

}

}

OnLoadElement(div)

</script>

</body>

</html>

该演示在div内容加载完成了过后将正在加载隐藏了

控制台显示的内容