XMLHttpRequest Loading Progress

XMLHttpRequest Related information please click here to see directly, I am not here to repeat:

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

------------------------------------------------This article begins------------------------------------------

The front end often uses JS to preload a picture, usually with the following code

Img=new Image (); if (Img.complete) {}; Cache img.onload = function () {}; Finished loading img.onerror= function () {}

img.src = "url";

But the progress of listening to a single picture is powerless, and loading other types of files is also very limited.

So:

XMLHttpRequest can be used to load almost any file. The loading progress of a single file can be monitored using the following code. (The Antique browser will look good)

var rq = new XMLHttpRequest (); Rq.onprogress=function (e) {if (e.lengthcomputable)//Progress information is available {Console.log (e.loaded + "of" + E.total + "bytes");}}

Note: We pre-load resources of course want him to cache to a local browser first. The above code does not have any problems. However, if you are using CDN acceleration, be sure to add it as a DOM element to the HTML body after the resource has been loaded successfully (insert and remove it as long as you have the following in HTML to be cached by the CDN)

Warning: cannot be used in local code. It should also not be used in synchronous mode requests.

XMLHttpRequest Loading Progress