JS Picture pre-load

When you open a webpage, the slowest and most time-consuming is loading the picture. Depending on the size of the picture, the loading time is different. This is what happens when a part of the picture is loaded and the other part is blank. In terms of overall experience, this makes the user experience much less.

And the pre-loading of the picture can solve this problem very well.

At this time, the general will use JS inside the image object.
function preloadimg (URL) {
var img = new Image ();
img.src = URL;
}

Window.onload=function () {

var Odiv=document.getelementbyid ("Div1");
var Loading=document.getelementbyid ("Loading"); A loading page

var arrimg=[];
for (var i=0; i<arr.length; i++) {

var oimg=new Image ();
Oimg.src=arr[i];

Oimg.onload=function () {

Arrimg.push (this); Pushed into the array as it was already loaded
Loading.innerhtml= "Loaded" +arrimg.length+ "/" +arr.length; Calculate the amount of pre-loaded
if (arrimg.length==arr.length) {//Load hundred percent
Loading.style.display= "None"; Loading also hidden
for (var i=0; i<arrimg.length;i++) {

Odiv.appendchild (Arrimg[i]); insert a picture into a page with the DOM
}
}
}
}
}

Summary: The entire pre-loading process picture has been loaded, and finally the DOM is inserted into the page to display, improving the user experience of the page.

JS Picture pre-load