CSS Image pre-loading

CSS code

This concept is to write a CSS style to set a batch of background images and hide them so that you will not see those images. The background images are the ones you want to preload.

This is an example:

# Preloader {
/* Images you want to preload */
Background-image: url(image1.jpg );
Background-image: url(image2.jpg );
Background-image: url(image3.jpg );
Width: 0px;
Height: 0px;
Display: inline;
}

This is just a way to hide your images, so they will not be displayed. I also saw someone using a very large background-position value to push out the image. Or give a negative margin value. There are many ways to hide the picture you want to preload. Choose the one that best suits you.

Another situation

Large images that need to be downloaded do not occur frequently. If you use the usual method, provide the representation of an image being loaded. Here is some CSS, you can give the user a prompt: The image is being loaded.

Img {background: url(loadingHourGlass.gif) no-repeat 50% 50% ;}

GIF images can be animations, similar to beach balls on mac or hourglass on PC. Use an animation so that the user will know that things are going on.

Conclusion

When it comes to pre-significance, do your best. Your users will like you. In fact, they may not notice it, but it is a good thing. If they notice that your website is being loaded, it may be too slow.