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缓存了）

 

警告: 不能在本地代码中使用. 也不该该在同步模式的请求中使用.