Introduction to js preloading and JavaScript Image() object usage_javascript skills

Preloading and JavaScript Image() Objects

A lot of high-res images can really make a website cleaner. But they can also make your site slower - images are files, files use bandwidth, and bandwidth is directly related to latency. It's time to learn how to speed up your Web site through a technique called image preloading.
Image preloading
For browser to load images, they will only be loaded by the browser after sending an HTTP request for the image. The HTTP request for the image is either Use the tag, or via a method call. If you use a JavaScript script to handle swapping images on mouseover events, or automatically changing images after a period of time, you may have to wait from a few seconds to a few minutes while getting the image from the server. This is especially true if you're using a slow Internet connection, or the image you're trying to retrieve is very large, or some other situation; in this case, the delay will prevent you from achieving the results you expect.
Some browsers take some measures to alleviate this problem, such as trying to store the image in the local cache so that subsequent calls to the image can be satisfied immediately; however, there will still be some problems when the image is first called. Delay. Preloading is a method of downloading images to cache before they are needed. This way, when the image is actually needed, it can be fetched from the cache and displayed immediately.
Image() object
The easiest 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, and we want to display this image when the user's mouse is placed over an already displayed image. To preload this image for faster response times, we simply create an Image() object heavyImage and load it simultaneously in the onLoad() event handler.

Please note that the image tag itself cannot handle onMouseOver() and onMouseOut() events, which is why the tag is contained within an tag in the example above For the same reason, the tag supports both event types.
Use an array to load multiple images
In actual applications, we may need to preload multiple images, not just one; for example, in a menu bar that contains multiple images scrolling , or when we are trying to create a smooth effect, we need to preload multiple images. In fact, this is not difficult, just use JavaScript arrays to achieve it, as shown in the following example:

In the above example, we define a variable i and an Image() object imageObj. Then a new array images[] is defined, each array element stores the image to be preloaded. Finally, create a for() loop that processes the entire array and assigns each element to an Image() object, thus loading it into the cache.
onLoad() event handler
Like many other objects in JavaScript, the Image() object also has some event handlers. One of the most useful is definitely the onLoad() handler, which is called after the image has fully loaded. This event handler can be linked to a custom function to perform some specific tasks after the image is fully loaded. This is illustrated in the example below, which first displays a "please wait" screen while the image loads, and then forwards the browser to a new URL when the load is complete.

Of course, you can also create an array of images and then loop over it, preloading each image, and then Keep track of the number of images loaded at each stage. Once all images are loaded, depending on the event handler's program logic, it can take the browser to the next page (or perform other tasks).
Preloading and multi-state menus
Now, how do you use all the theory you learned in a real-world application? The code below is a menu bar I occasionally wrote recently. This menu bar consists of some buttons (image links), each button has three states: normal, hover and click. Because buttons have multiple states, it is necessary to use image preloading to ensure that the menu state can respond quickly. The code in Listing A illustrates how to do this.
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 the normal state, it changes to the hover state. After the mouse is moved away, the button returns to its normal state.
# When the mouse clicks a button, the button becomes clicked. It will remain in this state until another button is clicked.
# If a button is clicked, the status of other buttons cannot be clicked. Other buttons can only be in hover state or normal state.
# Only one button can be clicked at the same time.
# Only one button can be hovered at the same time.
The first task is to set up an array to save images for each state of the menu. corresponding to these array elements are also created in the HTML document body (body) and named sequentially. Note that the array values ​​are indexed from 0, although the corresponding elements are named from 1 - this will require calculation adjustments later in the script.
The function preloadImage() is responsible for storing all images in the cache to minimize the response time of mouse movements. The for() loop is used to iterate over the images created in the first step and preload an image in each iteration.