XMLHttpRequest 加载进度

Posted 2020-07-27 luoeeyang

 

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

 

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