Three methods and advantages and disadvantages of image pre-loading, three advantages and disadvantages

Three methods and advantages and disadvantages of image pre-loading, three advantages and disadvantages

Pre-loading images is a good way to improve user experience. When images are pre-loaded into the browser, visitors can smoothly surf your website and enjoy extremely fast loading. This is very advantageous for websites with a large proportion of image galleries and images. It ensures fast and seamless publishing of images, it can also help users get a better user experience when browsing the content of your website. This article will share three different pre-loading technologies to enhance the website's performance and availability.

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:

Copy codeThe 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:

Copy codeThe Code is as follows:
// Better image preloading @ <A href = "http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/"> 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:

Copy codeThe Code is as follows:
<Div class = "hidden">
<Script type = "text/javascript">
<! -- // --> <! [CDATA [//> <! -- Var images = new Array ()
Function preload (){
For (I = 0; I <preload. arguments. length; I ++ ){
Images [I] = new Image ()
Images [I]. src = preload. arguments [I]
}
}
Preload (
"Http://domain.tld/gallery/image-001.jpg ",
"Http://domain.tld/gallery/image-002.jpg ",
Http://domain.tld/gallery/image-003.jpg"
)
// --> <!]> </Script>
</Div>

This method is especially suitable for pre-loading a large number of images. My gallery website uses this technology to pre-load more than 50 images. Apply the script to the logon page. Most gallery images are pre-loaded as long as the user enters the Logon account.

JavaScript code segment 2
This method is similar to the preceding method. You can also pre-load any number of images. Add the following script to any web page and edit it according to the program instructions.

Copy codeThe Code is as follows:
<Div class = "hidden">
<Script type = "text/javascript">
<! -- // --> <! [CDATA [//> <! -- If (document. images ){
Img1 = new Image ();
Img2 = new Image ();
Img3 = new Image ();
Img1.src = "http://domain.tld/path/to/image-001.gif ";
Img2.src = "http://domain.tld/path/to/image-002.gif ";
Img3.src = "http://domain.tld/path/to/image-003.gif ";
}
// --> <!]> </Script>
</Div>

As you can see, each time you load an Image, you need to create a variable, such as "img1 = new Image ();" and the source Image address Declaration, such as "img3.src =
"../Path/to/image-003.gif ";". Refer to this mode to load any number of images as needed.
We have also improved this method. Encapsulate the script into a function and use addLoadEvent () to delay the pre-loading time until the page is loaded.

Copy codeThe Code is as follows:
Function preloader (){
If (document. images ){
Var img1 = new Image ();
Var img2 = new Image ();
Var img3 = new Image ();
Img1.src = "http://domain.tld/path/to/image-001.gif ";
Img2.src = "http://domain.tld/path/to/image-002.gif ";
Img3.src = "http://domain.tld/path/to/image-003.gif ";
}
}
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 );

Method 3: Use Ajax for pre-loading

The method shown above does not seem cool enough. Now let's look at a method that uses Ajax to implement image pre-loading. This method uses DOM to not only pre-load images, but also pre-load CSS, JavaScript and other related things. The advantage of using Ajax is that loading JavaScript and CSS does not affect the current page. This method is simple and efficient.

Copy codeThe Code is as follows:
Window. onload = function (){
SetTimeout (function (){
// XHR to request a JS and a CSS var xhr = new XMLHttpRequest ();
Xhr. open ('get', 'HTTP: // domain. tld/preload. js ');
Xhr. send ('');
Xhr = new XMLHttpRequest ();
Xhr. open ('get', 'HTTP: // domain. tld/preload.css ');
Xhr. send ('');
// Preload image new Image (). src = "http://domain.tld/preload.png ";
},1000 );
};

The response code predefines the response preload.js?##preload.css=and response preload.png ". 1000 milliseconds of timeout is used to prevent the script from being suspended, leading to functional problems on normal pages.
Next, let's take a look at how to use JavaScript to implement the loading process:

Copy codeThe Code is as follows:
Window. onload = function (){

SetTimeout (function (){

// Reference to Var head = document. getElementsByTagName ('head') [0];

// A new CSS
Var css = document. createElement ('link ');
Css. type = "text/css ";
Css. rel = "stylesheet ";
Css. href = "http://domain.tld/preload.css ";

// A new JS
Var js = document. createElement ("script ");
Js. type = "text/javascript ";
Js. src = "http://domain.tld/preload.js ";

// Preload JS and CSS head. appendChild (css );
Head. appendChild (js );

// Preload image
New Image (). src = "http://domain.tld/preload.png ";

},1000 );

};

Here, we use DOM to create three elements to implement pre-loading of three files. As mentioned above, with Ajax, file loading will not be applied to page loading. From this point of view, the Ajax method is superior to JavaScript.

Now, this article will introduce you to the following three methods to implement image pre-loading technology. You have already understood which method is more efficient. I think my friends can see it, apply it to your project.