Let's learn a little trick called imagepreloading to speed up image access. Some browsers try to solve this problem by saving these images in the local cache, interested friends can understand that a large number of high-resolution images can indeed 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.
The Code is as follows:
