Which starts to load the html image or the css background image first? How to operate the CSS bitmap?

If your website is a picture station, the home page shows many pictures. Then you will have more images, which will cause slow loading. At this time, there are several solutions.

1. Physical solution: increase the bandwidth of the website+compress the image size;

2. Load js lazily with images. Before the images are loaded, load a buffer image to occupy the space;

3. That is what this article discusses. Use css to add a placeholder;

The first idea is to put a box around the outer layer of the picture, and then set a background image for the box.

Then during the test, it was found that this scheme did not work. When the picture was not loaded, the background picture of the box would not be displayed in time. It often disappeared when the picture was almost loaded.

According to the query data, when the browser renders the dom, it first loads the images in html, and then loads the background images in css. So this plan will not have the effect of change ..

Another solution:

Use your brain in the pseudo class "after" of the outer box, set a "position: relative;" for the outer box, and then set a "position: absolute;" for the pseudo class with a width and height of 100%; Add a background color and the prompt text "content:" loading ";", and the effect picture is shown below:

Apart from no animation, this operation basically has its own functions.