XMLHttpRequest 加載進度

 

XMLHttpRequest 相關資料請移步這裏直接查看，我這裏就不在贅述：

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

 

------------------------------------------------本文開始------------------------------------------

前端常常會使用js 來預加載圖片，一般代碼也以下

img=new Image();
if(img.complete){}; //緩存
img.onload = function (){}; //加載完畢		
img.onerror= function (){}

img.src = "url";

可是在監聽單張圖片的進度卻無能爲力，並且加載其餘類型的文件也很是有侷限性。

 

因此：

XMLHttpRequest 幾乎能夠用來加載任何文件。單個文件的加載進度可使用如下代碼監聽。（古董瀏覽器看看就行了）

var rq = new XMLHttpRequest(); 		

rq.onprogress=function(e)
{
	 if (e.lengthComputable) //進度信息是否可用
	 {
		console.log(e.loaded + " of " + e.total + " bytes");
	 }
}

 

 

 

注意：咱們預加載資源固然是但願他先緩存到本地瀏覽器。以上代碼也沒有任何問題。可是若是你使用了CDN加速，那麼在資源加載成功後，必定要將它做爲DOM元素添加到html body中（插入再移除只要讓他在HTML中出現如下就能被CDN緩存了）

 

警告: 不能在本地代碼中使用. 也不該該在同步模式的請求中使用.