Home > Developer > JavaScript
A large number of high-resolution images can indeed make a Web site radiant. But the same can also cause the site access speed drop-the picture is a file, the file will occupy bandwidth, and bandwidth directly related to the access wait time. Now, let's learn a little trick called image preloading to improve the speed of image access.
Some browsers try to resolve this problem by saving the pictures in the local cache. This allows you to call the pictures sequentially-but there will still be a delay for the first time you use them. Pre-loading is a technique for downloading pictures to the cache before a picture is needed. In this way, you can quickly recover a picture from the cache and display it immediately when you really need to display it.
Image () object
The simplest way to preload an image is to create a new image () object using JavaScript, and then pass the URL of the picture you want to preload to this object. Suppose we have a picture file called/uploadpic/2007-4/200741191620770.jpg, which we want to display when the user's mouse pointer moves over an existing picture. In order to preload this file faster, we simply created a new image () object named Heavyimage, and then loaded it into the page synchronously via the onload () event handle.
<script language = "JavaScript" >
function Preloader ()
{
Heavyimage = new Image ();
HEAVYIMAGE.SRC = "/uploadpic/2007-4/200741191620770.jpg";
}
</script>
<body >
<a href= "#" >
</a>
</body>
Note that the label (tag) itself does not handle onmouseover () and onmouseout () events, which is why the tags in the above example are included in the <a> tag. The label <a> includes support for these event types.
Load multiple pictures through an array (arrays)
In reality, you'll probably need to have more than one picture installed, for example, for a menu bar that includes multiple pictures, or for a smooth animation effect. It's not difficult to do this, just take advantage of the JavaScript array, as shown in the following example:
<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 above example, the variable I and the image () object named Imageobj are defined. Then define the new array images[], each array element will store the address source that needs to be preloaded with the picture. Finally, a for () loop is used to iterate through the entire array and specify an image () object for each element to preload the picture into the cache.
Next page
Preloading and the JavaScript Image () object
OnLoad () event handle (event handler)
Like many other objects in JavaScript, the Image () object also has many event handles. There is no doubt that the onload () handle, which is most useful, is invoked when the picture is fully loaded. After the picture is fully loaded, you can call this handle to complete a specific function through a custom function. The following example shows the code that implements the following action in this way: when the picture is loaded, the "Please wait" screen is displayed, and once the load is completed, the browser is booted to a new URL.
<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= '/uploadpic/2007-4/200741191621559.gif ';
function invoked on image load
function imagesloaded ()
{
document.location.href= ' index2.html ';
}
</script>
<body>
Please wait, loading images ...
</body>
Of course, you can also create an array of images, then loop, preload each element, and then track the number of pictures loaded at each stage. Once all the pictures have been loaded, you can program the event handle to bring the browser into the next phase (or accomplish other tasks).
Pre-loaded and multi-status (multi-state) menus
Now, how do you apply all the theoretical knowledge you've just learned to the actual application? Here's a piece of code I recently wrote-a menu bar that includes buttons (picture links), each of which can be in one of three states: normal, mouse hover, and click. Because the button has a variety of states, you must use a picture preload to ensure that the menu is fast enough to respond to state changes. The code in List a shows how to implement this feature:
The HTML code in List A creates a menu bar that includes four buttons, each with three states: normal, mouse hover, and click. The trigger conditions are as follows:
The mouse pointer moves to a button that is in the normal state, and the button changes to a mouse hover state. After the mouse moves out of the button area, the button returns to its normal state.
The mouse clicks the button and the button changes to a click state. It will remain in this state until the other button is clicked.
If you click a button, any other button may not be in the click State, only in mouse hover or normal state.
You can only click one button at a time.
Only one button at a time can be in the mouse hover state.
The first task is to set up an array of each state picture for the storage menu. The elements of the array element are also created in the body of the HTML document, and are named in order. Note that the index sequence of an array value starts at 0 and the corresponding element is named from 1-this requires that the corresponding value be adjusted in the second half of the script.
The function preloadimages () is responsible for loading all pictures into the cache, so there is little response time left to the mouse. The loop for () is used to repeat the picture creation operation in the first phase, and then preload each picture.
The function Resetall () is a handy way to reset all the pictures to their normal state. This is necessary because when a button is clicked on a menu, all the other buttons on the menu must revert to normal before the clicked button changes state.
The function Setnormal (), Sethover (), and Setclick () are responsible for changing the source of the picture that the specific image (the image number is passed as a function parameter) to the corresponding normal, mouse hover, or click state of the picture source. The clicked picture will not accept mouse action because the clicked image must remain state (reference rule) before it is clicked in another image. The function Setnormal () and the Sethover () code only finishes the action of changing the state of the picture without the click state.
These are just one of several ways to speed up JavaScript effects by using preloaded technology. The above technology can be used in the site and adjusted according to the actual situation. I hope everything goes well!
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
