"Javascript" uses CSS, JavaScript, and Ajax to implement three main methods of picture preload __ Database

Perishable Press website recently published an article "3 Ways to preload Images with CSS, JavaScript, or Ajax", sharing the use of CSS, JavaScript and Ajax to achieve a picture preload three major methods. The following is the translation.

Pre-loading pictures are a great way to improve the user experience. The picture is preloaded into the browser, and visitors can surf the site smoothly and enjoy a very fast loading speed. This is good for a large percentage of the picture galleries and pictures, which ensures that the images are released quickly and seamlessly, and can help users gain a better user experience when browsing through your site's content. This article will share three different preload technologies to enhance the performance and usability of your site.

method One: pre-loading with CSS and JavaScript

There are many ways to implement preloaded images, including using CSS, JavaScript, and a combination of both. These technologies can be designed according to different design scenarios for the corresponding solution, very efficient.

The simple use of CSS, you can easily and efficiently preload the picture, the code is as follows:

1 2 3

#preload -01 {background:url (http://domain.tld/image-01. png) no-repeat-9999px-9999px;} #preload -02 {ba Ckground: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}

By applying these three ID selectors to (X) HTML elements, we can preload the picture onto the background outside the screen with the background property of the CSS. As long as the paths of these pictures remain unchanged, and when they are invoked elsewhere in the Web page, the browser uses the preloaded (cached) picture during the rendering process. Simple, efficient, and does not require any javascript.

Although the method is efficient, there is still room for improvement. The images loaded with this method are loaded together with the other contents of the page, which increases the overall load time of the page. To solve this problem, we added some JavaScript code to postpone the preload time until the page loads. The code is as follows:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21-22

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 ') {       & nbsp Window.onload = func;     }  else  {         window.onload =  function () {             if  (oldonload) { & nbsp;               oldonload ();             }               func ();         }     } addloadevent (Preloader);

In the first part of the script, we get the element that uses the class selector and set the Background property to preload the different pictures.

In the second part of the script, we use the addloadevent () function to delay the load time of the Preloader () function until the page has finished loading.

What happens if JavaScript does not work correctly in the user's browser. Very simple, the picture will not be preloaded, when the page calls the picture, the normal display can be.