Home > Developer > JavaScript
Many high-res images can make the Web site more clean and tidy. However, they also slow the Website access speed-the image is a file, the file uses the bandwidth, and the bandwidth is directly related to the waiting time. It's time to learn how to use a technique called preloading to speed up Website access.
Image pre-loading
For a browser to load images, they are loaded by the browser only after an HTTP request is sent to the image. The HTTP request to the image is either marked with , it can be implemented through method calls. If you use a JavaScript script to exchange images when processing a mouseover event or change the image automatically after a period of time, it may take several seconds to minutes to get the image from the server. If you use a slow Internet connection, or the image you want to obtain is very large, or in other situations, this phenomenon is particularly obvious; in this way, latency will cause you to fail to achieve your desired effect.
Some browsers adopt some measures to alleviate this problem. For example, they try to store images in the local cache so that subsequent calls to images can be immediately satisfied; however, there will still be some latency when the image is called for the first time. Pre-loading is a way to download images to the cache before they are needed. With this measure, an image can be immediately taken out of the cache when it is actually needed, so that it can be displayed immediately.
Image () object
The easiest way to pre-load an Image is to instantiate a new Image () object in JavaScript, and then pass in the URL of the Image to be loaded as a parameter. Assume that we have a picture called heavyimagefile.jpg. When you place your mouse over an image that has already been displayed, we want to display this image. To pre-load this Image to get a fast response time, we simply create an Image () object heavyImage and load it simultaneously in the onLoad () event processor.Copy codeThe Code is as follows: <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 Image Tag itself cannot process the onMouseOver () and onMouseOut () events. This is why the tag in the previous example is included in a <a> tag, <a> the tag supports the two event types.
Load multiple images using Arrays
In practical applications, we may need to pre-load multiple images, but more than one. For example, in a menu bar that contains multiple image flip volumes, or when we try to create a smooth effect, you must pre-load multiple images. In fact, this is not difficult, as long as the JavaScript array can be implemented, 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, we define a variable I and an Image () object imageObj. Then a new array images [] is defined, and each array element stores the image to be preloaded. Finally, create a for () loop to process the entire array and assign each element to the Image () object so that it is loaded into the cache.
OnLoad () event Processor
Like many other JavaScript objects, Image () objects also have some event processors. The most useful one is the onLoad () processor, which is called after the image is fully loaded. This event processor can be associated with a UDF to execute some specific tasks after the image is fully loaded. The following example illustrates this. In this example, a "please wait" screen is displayed when the image is loaded, and the browser is directed to a new URL when loading is complete.Copy codeThe Code is as follows: <Head>
<Script language = "JavaScript">
// Create an image object
ObjImage = new Image ();
// Set what happens once the image has loaded objImage. onLoad = imagesLoaded ();
// Preload the image file
ObjImage. src = 'images/image1n.gif ';
// Function invoked on image load
Function imagesLoaded ()
{
Document.location.hrefw.'index2.html ';
}
</Script>
</Head>
<Body>
Please wait, loading images...
</Body>
</Html>
Of course, you can also create an image array and perform cyclic operations on it, pre-load each image, and track the number of images loaded at each stage. Once all the images are loaded, based on the program logic of the event processor, it can bring the browser to the next page (or execute other tasks ).
Pre-load and multi-state menus
Now, how can we use all the theories you have learned in practical applications? The following code is a menu bar that I occasionally wrote recently. It consists of buttons (image links). Each button has three states: Normal, hover, and click. Because buttons have multiple states, it is necessary to use image pre-load to ensure that the menu status can be quickly reflected. The code in listing A illustrates the implementation method.
The HTML code in listing A sets A menu consisting of four buttons, each of which has three states: Normal, hover, and click. The requirements are as follows:
# When you move the cursor over a normal button, it changes to the hover state. After the mouse leaves, the button returns to normal.
# When you click a button, the button changes to the click state. This status is retained before other buttons are clicked.
# If a button is clicked, the status of other buttons cannot be clicked. Other buttons can only be in the hover or normal status.
# Only one button can be clicked at a time.
# Only one button can be in the hover state at a time.
The first task is to set an array to save the images of each State in the menu. corresponding to these array elements is also created in the HTML document body and named sequentially. Note that the index of the array value starts from 0, although the name of the corresponding element starts from 1 -- this requires calculation and adjustment in the part after the script.
The preloadImage () function stores all images in the cache to minimize the response time of mouse movement. The for () loop is used to iterate the image created in the first step and pre-load an image in each iteration.
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
