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)   
                 }
	}