JavaScript to determine whether a variety of resources are loaded complete method summary, resources preloading problem

Put the website on the server, because of server bandwidth problems, only to find a lot of resources such as pictures, audio in the website opened after 1 minute has not loaded, resulting in unable to play. So I decided to use JS to add a function at the beginning to determine whether the resource has been loaded and run, only when the resource has been fully loaded to enter the main page.

On the Internet looked up a lot of are said to use onload, but this can only determine whether the document DOM tree parsing is complete, but audio, pictures and so on resource loading is not complete can not determine.

I will share my plan in the future.

1. Determine whether the audio/video loading is complete

Audio and video elements are

Then, when the value of this property is 4, you know that the load is complete.

At the same time, audio and video elements can set their preload property to set whether or not they are preloaded. The property value is as follows:

By default, this value is metadata, and only metadata is loaded. Therefore, if you want the audio to be used in real time, you are advised to change the property to Auto and then check the readyState property to see if the loading is complete, but the page may open a little slower.

For example, to set the audio to automatically load:

<audio src="./testAudio.wav" preload="auto"></audio>
Copy the code

On one of my slow servers, I read an audio tag 100 times per second to see if it has been loaded:

setInterval(() => {
	console.log(document.querySelector('.succeedAduio-2').readyState);
}, 10);
Copy the code

Here are the results:

So it’s 0 if it’s not loaded properly, and it’s 4 at the end.

Based on this, we can know if the audio component has been loaded and can’t play until it has been loaded.

The same goes for video elements.

2, image IMG element

Unlike audio and video elements, the IMG element does not have a readyState property, but it can be obtained through its complete property. This property is true when the image is loaded and false otherwise.

For example, I have an img element here:

<img src="https://file.moetu.org/images/2021/03/03/gz-13c176dbd1ced48543.png" />
Copy the code

Again, I use js to read this property 100 times per second:

let img = document.querySelector('img'); SetInterval (() => {console.log(img.complete); }, 10);Copy the code

Here are the results:

For the IMG element, the complete attribute tells you whether the load is complete.

3. Background image of div element

Divs don’t have either of these properties, but how do you know if a div element with a background image is loaded?

We can obtain the address of the backgroundImage of the div by obtaining the value of the style. BackgroundImage of the div through js, and then create an Image object with the address as the parameter in js. The Image object also has the complete property, and we can judge whether the loading is complete according to the new object.

Let’s write a function here to retrieve the background image address of the div:

/** * getDivImage address * @param {*} divElement div element */ function getDivImage(divElement) {let imgurl = window.getComputedStyle(divElement, null).getPropertyValue('background-image'); return imgurl.substring(5, imgurl.lastIndexOf('\"')); }Copy the code

Window.getcomputedstyle () ¶ Window.getComputedStyle (); window.getComputedStyle ();

For example, I have a div element:

<div class="divImg"></div>
Copy the code

It has already set the background image with CSS:

.divImg {
	position: relative;
	width: 200px;
	height: 150px;
	background: url("https://file.moetu.org/images/2021/03/03/ys-4b588a903494b1e90.png") no-repeat center/cover;
}
Copy the code

Then I get the element in js, and use the custom function above to get the background Image address, create the Image object, and read 100 times per second to see if the load is complete:

let divImg = document.querySelector('.divImg'); // Get the div element. Let getImg = new Image(); // Create an Image object getimg. SRC = getDivImage(divImg); SetInterval (() => {console.log(getImg.complete); }, 10);Copy the code

Here are the results:

The above test images are all very large, so it can be seen that it takes tens of seconds or even a minute to load.

4. Resource preloading problem

To implement resource preloading, it is actually very simple. The video and audio elements mentioned above, change the preload attribute to auto. To preload an Image, simply create an Image object in js and specify its SRC. For example, IF I want to preload all the images I need:

/ / the required image address in an array of const imgurls = [' https://file.moetu.org/images/2021/03/04/gz-1844d1db4a9a2d0dc3.png ', 'https://file.moetu.org/images/2021/03/04/ys-5627f9c93bc08ad29.png', 'https://file.moetu.org/images/2021/03/03/ys-4b588a903494b1e90.png', 'https://file.moetu.org/images/2021/03/03/gz-13c176dbd1ced48543.png', 'https://file.moetu.org/images/2021/02/10/illust_85719128_20201120_19253792efd4d4d825d6e1.jpg' ]; For (let I = 0; let I = 0; i < imgurls.length; i++) { let img = new Image(); img.src = imgurls[i]; }Copy the code

In the above code, we simply create the Image object by iterating through the Image address with JS. After creating the Image object and setting its SRC attribute, the Image starts to load! After loading the HTML call does not need to load again, directly use.

We call this js script to execute the appeal statement in an HTML that does not write any elements. We can see that the page does not display anything, but the image resources are loaded already:

Resources can be used immediately after preloading, but can also make the site slow to open accordingly, so generally do not preload too many resources.