js-用判断音乐或图片是否加载完成的方式来控制页面的现实

判断页面加载，加完完成后，内容页显示，加载条隐藏

百度搜索方法很多，大多都是：

document.onreadystatechange = function() 　　//当页面加载状态改变的时候执行function

{ 

　　 if(document.readyState == "complete")

　　{ 　　//当页面加载状态为完全结束时进入 
              init();　　 //你要做的操作。
   　 }
}　

 

上面的方法我测试后是可以这样来操作的，但是页面也会出现：

document.readyState == "interactive"

　　

上面这种情况。好吧我可能想到了。上面的方法是对的。

但是我还是被安利了一种新的方法

判断页面中的用的音乐或一张大的图片的加载进度来控制页面的隐藏显示，加载条的隐藏显示

方法如下：

var ajax = new XMLHttpRequest();
ajax.open("get", "http://******/loading.mp3")
	ajax.responseType = "blob";
	ajax.send();
	ajax.onprogress = function(event) {
	}
	ajax.onreadystatechange = function() {
		if(ajax.readyState == 4 && ajax.status == 200) {
			document.getElementById("audio").src = URL.createObjectURL(ajax.response);
			document.getElementById('audio').play();  
			setTimeout(function(){
		               	document.getElementById('loading').style.display='none';
		               	document.getElementById("page").style.display='block';
		        },1000)   
                 }
	}