Image pre-loading, On-Demand Loading

We often encounter such situations.

1. During page layout, some images are packaged with the IMG label and some are background-image. When the user's network is fast, you will obviously find that the image of the IMG tag will be loaded first, and then the image of the background-image will be loaded at the end. At this time, you will find that the page user experience is very poor, the background-image does not render the interface, which is a bit ugly.

2. We hope that the images will be loaded in a pre-arranged order.

3. When will images be loaded?

Javascript can be used as follows:

For example, pre-load the background image:

Function LoadImage (URL) {var IMG = new image (); IMG. src = URL;} var bg_imgs = new array ("/images/home/bottom_bg.png", "/images/home/bottom_bg2.png", "/images/home/bottom_bg3.png ", "/images/SUB/mid_bg.jpg", "/images/SUB/mid_bg2.jpg", "/images/SUB/mid_bg3.jpg"); For (VAR I = 0; I <bg_imgs.length; I ++) {LoadImage (bg_imgs [I]);}