Home > Developer > JavaScript
A large number of high-resolution images can make a Web site shine. However, the Website access speed may also decrease. If the image is a file, the file will occupy the bandwidth, and the bandwidth is directly related to the access wait time. Now, let's learn a little trick called image preloading to speed up image access.
Some browsers try to solve this problem by saving these images in the local cache. In this way, you can call these images in sequence-however, there will still be latency when using these images for the first time. Pre-loading is a technology that downloads images to the cache before they are needed. This method can be used to quickly restore an image from the cache and display it immediately when the image needs to be displayed.
Image () object
The simplest method of Image pre-loading is to create a new Image () object using JavaScript, and then pass the Image URL you want to pre-load to this object. Assume that we have an image file named heavyimagefile.jpg. We hope this file will be displayed when you move your mouse pointer to an existing image. In order to facilitate the pre-loading of this file, we simply created a new Image () object named heavyImage, and then loaded it to the page synchronously through the onLoad () event handle.
Copy codeThe Code is as follows:
<Html>
<Head>
<Script language = "JavaScript">
Function preloader ()
{
HeavyImage = new Image ();
HeavyImage. src = "heavyimagefile.jpg ";
}
</Script>
</Head>
<Body onLoad = "javascript: preloader ()">
<A href = "#" onMouseOver = "javascript: document.im?1.src='heavyimagefile.jpg '">
</a>
</Body>
</Html>
Note that the tag of an image does not process the onMouseOver () and onMouseOut () events. This is exactly why the tag in the preceding example is included in the <a> tag. Tag <a> supports these event types.
Load multiple images through arrays (arrays)
In actual situations, you may need to pre-load more than one image. For example, for menus containing multiple images, or you want to achieve a smooth animation effect. To implement these functions, you only need to use the JavaScript array, as shown in the following example:
Copy codeThe Code is as follows:
<Script language = "JavaScript">
Function preloader ()
{
// Counter
Var I = 0;
// Create object
ImageObj = new Image ();
// Set image list
Images = new Array ();
Images [0] = "image1.jpg"
Images [1] = "image2.jpg"
Images [2] = "image3.jpg"
Images [3] = "image4.jpg"
// Start preloading
For (I = 0; I <= 3; I ++)
{
ImageObj. src = images [I];
}
}
</Script>
In the preceding example, the variable I and the Image () object named imageObj are defined. Then the new array images [] is defined. Each array element stores the address source for the image to be preloaded. Finally, we use a for () loop to traverse the entire array and specify an Image () object for each element to preload the Image to the cache.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
