Native JS to achieve home page progress loading animation _javascript skills

JS Progress Loading Animation program is my personal work, write a bad, you can refer to, but without my permission, please do not use for other purposes!

The morning to write a homepage progress loading animation, I would like to use on my blog, test found that the blog is too fast to load, not see the animation effect, directly loaded ' Complete ', forget it, or do not make the blog too bloated!

So I wrote a demo page, in the body Riga an IFRAME to load a larger site, so you can see the effect!

With Safari to open a seemingly CSS animation playback time into sync, do not know what the reason, the local test is no problem (please great God guidance!) Chrome, Firefox is OK, and ie I haven't tested

Load time Statistics I used the performance property of the Windows object, which is a method specifically used to compute the exact time, which is a description of MDN about the performance property

The implementation of this example is relatively simple, but not true by file size to show the load progress, only when triggering document.onreadystatechange events, according to the state of document.readystate to change the display progress. In fact, there is a more reliable method, with the XMLHttpRequest object instance of the Progress event, detailed interpretation of XMLHttpRequest, such as:

 var request = new XMLHttpRequest ();
 request.onprogress = function (e) {
 if (e.lengthcomputable) {//lengthcomputable refers to whether a file has a size, a value of true, False
 progress.innerhtml = Math.Round (100* e.loaded/e.total) + \ '%\ '; Loaded, total indicates the size and overall size already loaded
 }
 } 

Using the above method to achieve it is also very troublesome, but also can not achieve 100% real load progress, so I simply fake a little, do not have him!

This example also uses the Document.stylesheets[0].insertrule () method, here has my summary of it: Using native JS to read and write CSS style method summary

About the implementation of CSS animation, we look at the code, very simple code, if you look laborious, suggest to complement the CSS Foundation, introduce a dry goods, CSS Chinese Reference manual website, I have limited ability to express, not here to chew the tongue

Here is the complete code + Demo:

<! DOCTYPE html>  

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.