Home > Developer > JavaScript
Pre-loaded and JavaScript Image () objects
Many high-res images can really make your Web site more uncluttered. But they also make the site more slow to access-the image is a file, the file uses bandwidth, and the bandwidth is directly related to the wait time. It's time to learn how to improve the speed of Web site access through a technique called Image preloading (preloading).
Image Pre-loading
For browser loading images, only after sending an HTTP request to the image will they be loaded by the browser, the HTTP request to the image either uses the tag or is implemented through a method call. If you use JavaScript scripts to process images during mouseover events, or to automatically change images after a period of time, you may have to wait a few seconds to several minutes to get an image from the server. This is especially true if you are using a slow internet connection, or if you want to get an image that is very large, or some other situation, so that the delay causes you to fail to achieve your desired results.
Some browsers take steps to mitigate this problem, such as trying to store images in a local cache so that subsequent calls to the image can be immediately met, but there are still some delays when the image is first tuned. Preloading is a way to download the image to the cache before it is needed. With this measure, when the image is really needed, it can be immediately removed from the cache, allowing it to be displayed immediately.
Image () object
The simplest way to preload an image is to instantiate a new image () object in JavaScript, and then pass in the URL of the image that needs to be loaded as a parameter. Suppose we have an image called Heavyimagefile.jpg, which we want to display when the user's mouse is placed above an already displayed image. In order to preload this image for a faster response time, we simply create an image () object heavyimage and load it simultaneously in the OnLoad () event handler.
Note that the image tag itself cannot handle the onMouseOver () and onmouseout () events, which is why the tag is included in a <a> tag in the previous example,<a> tag supports both event types.
Loading multiple images using an array
In practical applications, we may need to preload multiple images, and more than one, for example, in a menu bar with multiple image curl, or when we try to create a smoothing effect, we need to preload multiple images. In fact, this is not difficult, as long as the use of JavaScript arrays can be implemented, as shown in the following example:
In the example above, we define a variable i and an Image () object imageobj. 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 handler
Like many other JavaScript objects, the Image () object has some event handlers. One of the most useful is definitely the onLoad () processor, which is called after the image is fully loaded. This event handler can be associated with a custom function to perform some specific tasks after the image is fully loaded. This is illustrated in the following example, where a "Please wait" screen is displayed first when the image is loaded, and then the browser is transferred to a new URL when loading is complete.
Of course, you can also create an array of images and iterate over them, preload each image, and then track the number of images loaded at each stage. Once all the images are loaded, it is possible to take the browser to the next page (or perform other tasks), depending on the program logic of the event handler.
Pre-loading and multi-status menus
Now, how do you use all the theories you've learned in a real-world application? The following code is a menu bar I have recently written occasionally, which consists of buttons (image links), each with three states: normal, Hover, and click. Because the button has a variety of States, it is necessary to use the image pre-loading to ensure that the menu state can quickly react. The code in listing a illustrates the implementation method.
The HTML code in listing a sets up a menu of four buttons, each with three states: normal, Hover, and click. The requirements are as follows:
# When the mouse moves over a button in a normal state, it becomes a hover state. After the mouse leaves, the button reverts to its normal state.
# When the mouse clicks on a button, the button becomes the click state. It retains this state until the other button is clicked.
# If a button is clicked, the status of the other buttons cannot be clicked. The other buttons can only be hover or normal.
# only one button can be clicked at a time.
# only one button at a time can be in hover state.
The first task is to set up an array that holds the image for each state of the menu. The corresponding to these array elements is also created in the body of the HTML document and named sequentially. Note that the index of the array value starts at 0, although the corresponding element is named starting at 1-This requires a calculation adjustment in the section following the script.
The function preloadimage () is responsible for storing all the images in the cache to minimize the response time of the mouse motion. The for () loop is used to iterate through the image created in the first step and preload an image in each iteration.
Pre-loaded and JavaScript Image () objects
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
