Home > Developer > JavaScript
A lot of high-resolution images can really dress up a Web site. However, they may also reduce the website's (response) Speed-when images are all files, the file will occupy the bandwidth, and the bandwidth is directly related to the waiting time. Now it's time for you to learn how to use a small technique called image pre-loading to speed up your website.
Image pre-loading
The browser generally works in the following way: the image is loaded only when the HTTP request for image loading is sent, whether it is passively loading through the tag or actively loading through method calls. Therefore, if you have a piece of JavaScript code, you need to switch the image when hovering the mouse, or automatically change the image after the timeout, in this case, you may wait for the image to be retrieved from the server at any time, ranging from several seconds to several minutes. When you connect to the Internet at a slow speed, or when the retrieved image is very large, this situation is particularly significant, and this data delay will usually destroy your desired effect.
Some browsers will try to pass this problem through, for example, saving the image in the local buffer zone, so that the call to it will soon take effect, however, latency still occurs when the image is called for the first time. Pre-loading is a technology that downloads images to the buffer before they are needed. In this way, when you really need an image, it can be retrieved from the buffer and displayed immediately.
Image () object
The easiest way to pre-load an image is to instantiate a new image () object using JavaScript and pass the URL of the image you want to pre-load to it. Suppose we have an image called http: // scheme that has been displayed, and the system can display this image. To pre-load this image for faster response time, we only need to create a new image () object, name it heavyimage, and process it using the onload () event.ProgramLoad it to the page at the same time.
<HTML> Note that the Image Tag itself does not process onmouseover () and onmouseout () events, which is why the tag in the above example is placed in a <A> tag, the latter does include support for these event types.
Load multiple images with Arrays
In practice, you may need to preload more than one image. For example, in a menu bar that contains multiple rolovers, or if you are trying to create a smooth dynamic effect. This is not difficult; all you need to do is to use JavaScript arrays, as shown in the following example:
In the above example, you first define the variable I and the image () object called imageobj. Define a new array called images []. In this array, each array element stores the image source to be preloaded. Finally, create a for () loop to loop in the array and assign each of them to the image () object, in this way, it can be preloaded into the slow-forward area.
onload () event handler
like many other objects in Javascript, image () objects also contain multiple event handlers. The most useful of this is the onload () processing program, which will be called when the image is loaded. This processing program can be used with custom functions to perform specific tasks after image loading is completed. The following example illustrates this problem by displaying the "Please wait (please wait)" prompt during image loading, and then sends a new URL to the browser after the image is loaded.
<HTML>
Of course, you can also create an image array, loop it, pre-load each image, and keep track of the number of Loaded Images at each stage. Once all the images are loaded, the event handler can take the browser to the next page (or perform other tasks) according to the settings ).
Preload and multi-state menu
Now, how can I put the theory you just learned into real practice? The following content is a section that I happened to write.Code-- A menu bar consisting of multiple buttons (image links) -- each button can be in one of the three States: Normal, hover) and click ). Because all buttons have multiple states, it is necessary to use image pre-loading to ensure that the menu can respond quickly according to the switch state. The code in list A describes this.
The HTML code in list A creates a menu bar consisting of four buttons, each of which has three states: Normal, hover, and click. The requirements are as follows:
However, when you move the cursor over a normal button, the button changes to hover. When you move the mouse away, the button returns to normal.
When you click the button, the button changes to the click status. It will remain in this status until another button is clicked.
If a button is clicked, other buttons cannot be clicked. Other buttons can only be in the hover or normal state.
Only one button can be clicked at a time.
Only one button can be hovering at a time.
The first task is to create an array of images that save each State of the menu. The elements corresponding to these array elements are also created in the body of the HTML document and named in order. Note that the index of the array value starts from 0, the corresponding element is named from 1-this requires some computing adjustment in the section after the script.
The preloadimages () function is responsible for loading all the images into the buffer, so that the response time for moving the mouse is minimized. A For () loop is used to iterate on the images created in step 1 and pre-load each image.
The resetall () function is a convenient way to restore all images to their normal state. This is necessary because when a menu item is clicked, all other items in the menu must be restored to normal before the clicked item can be switched to the click status.
The setnormal (), sethover (), and setclick () functions are responsible for changing the source of a specific image (the image number is transferred as the independent variable of the function) to normal, hover, or click status. Because the clicked images must remain in the click State until another image is clicked (see the second requirement), they will not respond to mouse movement for the moment; in this case, if the button is not in the click state, the Code included in the setnormal () and sethover () functions can only be used to change the status of the button.
The pre-loading mentioned above is only one of the multiple ways to improve the response time of your JavaScript effect. Use the skills listed above on your website and change them as needed. Good luck!
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
