Use JS to make GIF images appear before loading the page

Here is the code, which is a pseudo-loading cue bar, independent of the loading speed

<! DOCTYPE html>
　　
Here are the workarounds for other people on the web that can really achieve the percentage of display loading
If you need to display the load progress when the page is initially loaded. Mainly refers to the picture in a lot of cases:
You can use a third-party jquery plug-in Jquery.imgpreload.min.js call inside the method: Imgpreload, examples are as follows:
var Imgnum = 0;var images = [];$ (function () {preloadimg ();}); There are two ways to function preloadimg () {///First: Get all the IMG in the page through the DOM method, including the  tag and background-image/*get all IMGs tho    Se tag is  var imgs = document.images;    for (var i = 0; i < imgs.length; i++) {Images.push (IMGS[I].SRC);    }//get all images in style var cssimages = Getallbgimages ();    for (var j = 0; J < Cssimages.length; J + +) {Images.push (cssimages[j]);          }*///The second way: all the images used on the page are pre-placed in an array $.imgpreload ([' images/bg1.jpg ', ' images/bg2.jpg '], function () {     Here is the background graph needed to display the progress percentage, which can be loaded first});    Then, push all, and images in the array to load Images.push ("Images/test_1.png");    Images.push ("Images/test_2.png");   Images.push ("Images/test_3.png");    。。。        Images.push ("Images/test_n.png"); /* Here is a real picture preloaded preload*/$.imgpreload (images, {each:function ()} {/*this'll be ' called after EAC        H Image loaded*/    var status = $ (this). Data (' Loaded ')?            ' Success ': ' Error ';                if (status = = "Success") {var v = (parsefloat (++imgnum)/images.length). toFixed (2);                            $ ("#percentShow"). HTML (Math.Round (v * +) + "<sup>%</sup>"); }}, All:function () {/*this'll is called after all images loaded*/$ ("#percentSho             W "). html (" 100<sup>%</sup> ");                        $ ("Percentshow"). FadeOut (1000);        $ (". Main"). Show (); }    });} Get all images in style (this method refers to other blogs) function getallbgimages () {var url, B = [], A = document.getElementsByTagName (' * ')    );    A = B.slice.call (A, 0, a.length);        while (a.length) {url = document.deepcss (A.shift (), ' background-image '); if (URL) url =/url\ ([' ""]? ( [^")] +)/.exec (URL) | |        [];        url = url[1];    if (url && b.indexof (url) = =-1) b[b.length] = URL; } return B; Document.deepCSS = function (who, CSS) {if (!who | |!who.style) return ';    var sty = Css.replace (/\-([A-z])/g, function (A, b) {return b.touppercase ();    }); if (Who.currentstyle) {return who.style[sty] | | who.currentstyle[sty] | |    ‘‘; } var dv = Document.defaultview | |    Window    return Who.style[sty] | | Dv.getcomputedstyle (who, ""). GetPropertyValue (CSS) | | ';} Array.prototype.indexOf = Array.prototype.indexOf | |     function (what, index) {index = index | | 0;     var L = this.length;         while (Index < L) {if (this[index] = = = what) return index;     ++index; } return-1; }
　　
Use JS to make GIF images appear before loading the page