Image pre-loading must be familiar to everyone. There are many ways to implement the pre-loading of images, including using CSS, JavaScript, and various combinations of the two. These technologies can be used to design corresponding solutions based on different design scenarios, which is very efficient.
Method 1: implement pre-loading with CSS and JavaScript
There are many ways to implement pre-loading images, including using CSS, JavaScript, and various combinations of the two. These technologies can be used to design corresponding solutions based on different design scenarios, which is very efficient.
With CSS alone, you can easily and efficiently pre-load images. The Code is as follows:
The Code is as follows:
# Preload-01 {background: url (http://domain.tld/image-01.png) no-repeat-9999px-9999px ;}
# Preload-02 {background: url (http://domain.tld/image-02.png) no-repeat-9999px-9999px ;}
# Preload-03 {background: url (http://domain.tld/image-03.png) no-repeat-9999px-9999px ;}
Apply the three ID selectors to the (X) HTML element. Then, we can pre-load the image to the background outside the screen through the background attribute of CSS. As long as the paths of these images remain unchanged, when they are called elsewhere on the web page, the browser will use pre-loaded (cached) images during rendering. Simple and efficient, without any JavaScript.
Although this method is efficient, there is still room for improvement. The image loaded with this method is loaded together with other content on the page, increasing the overall loading time of the page. To solve this problem, we added some JavaScript code to delay the pre-loading time until the page loading is complete. The Code is as follows:
The Code is as follows:
// Better image preloading @ http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/ </a>
Function preloader (){
If (document. getElementById ){
Document. getElementById ("preload-01"). style. background = "url (http://domain.tld/image-01.png) no-repeat-9999px-9999px ";
Document. getElementById ("preload-02"). style. background = "url (http://domain.tld/image-02.png) no-repeat-9999px-9999px ";
Document. getElementById ("preload-03"). style. background = "url (http://domain.tld/image-03.png) no-repeat-9999px-9999px ";
}
}
Function addLoadEvent (func ){
Var oldonload = window. onload;
If (typeof window. onload! = 'Function '){
Window. onload = func;
} Else {
Window. onload = function (){
If (oldonload ){
Oldonload ();
}
Func ();
}
}
}
AddLoadEvent (preloader );
In the first part of the script, we obtain the elements using the class selector and set the background attribute for it to pre-load different images.
In the second part of the script, we use the addLoadEvent () function to delay the loading time of the preloader () function until the page is loaded.
What happens if JavaScript cannot run normally in your browser? Very simple. images are not pre-loaded. When the page calls images, they are displayed normally.
Method 2: use JavaScript only for pre-loading
The above method is sometimes very efficient, but we gradually find that it will take too much time in the actual implementation process. On the contrary, I prefer to use pure JavaScript to implement image pre-loading. The following two pre-loading methods are provided, which can work well on all modern browsers.
JavaScript code segment 1
You only need to simply edit and load the path and name of the image you want. This is easy to implement:
The Code is as follows:
