Translated from: Creating a CSS Image Preloader
Chinese: Pure CSS image preloading
All rights reserved. Please indicate the source for reprinting, thank you!
There are many ways to implement image preloading, usually mostly using Javascript to keep things scrolling. Don't be constrained by Javascript preloading anymore, use CSS and you can preload your images without any hassle.
Why use preloading
Why would you consider using preloading? Have you ever had a website where you had to scroll your navigation and then there was a delay until the images were loaded...hehe. Preloading will help you in this regard. It will load those images when the page loads and store them in the browser's cache. In this way, when the user scrolls the navigation, it will be beautiful and smooth, without any delay.
CSS code
The concept is to write a CSS style to set a bunch of background images and then hide them so you can't see those images. Those background images are the ones you want to preload.
Here 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 won't be displayed. I've also seen people use very large background-position values to push images out. Or give a negative margin value. There are many ways to hide the images you want to preload, choose the one that suits you best.
another situation
It doesn't happen very often that you have a huge image to download, if you follow the usual approach of providing some kind of indication that the image is loading. Here is some CSS to give the user a hint that the image is loading.
img { background: url(loadingHourGlass.gif) no-repeat 50% 50%; }
GIF images can be animated, similar to things like beach balls on a Mac or hourglasses on a PC. Use an animation so the user knows something is going on.
in conclusion
Do your best when preloading makes sense, and your users will love you for it. In fact they may not notice, but that's a good thing, if they notice your site is loading, it's probably too slow.
Special notes about Example 1
First of all, thank you for the questions raised by netizens in the comments. After translating this article, considering that the same attribute is defined multiple times in a CSS rule, browsers generally only process the last one, I decided that it was necessary to do a test, but I didn't realize what was going on. Due to the seriousness of the matter, it was not dealt with in time, which may cause some misunderstandings.
According to my tests, most browsers only load the last image, and the first two images are ignored . But in webkit-core browsers, such as chrome, these three images will be preloaded. Example 1 provides us with a good idea for solving the problem , but for the usage of loading multiple images in the same CSS style, we may have to wait until the multiple background image attributes of CSS3 are supported by more browsers.
PS: Let me explain this demo. Maybe the original author didn't think too much and just wanted to demonstrate the effect of preloading, so this demo page was a bit simple: he just used the preloaded image as the background of a:hover, so that when the mouse passes over it, Can flicker-free reality of that picture. Well, that is the second usage in the article...
Original translation :
http://www.qianduan.net/pure-css-image-preloader.html