In previous courses, we learned a variety of operations on text and strings, and today we focus on two different data types: images and objects. After learning this lesson, you will know how:
Use JavaScript to speed up image exchange.
Create your own objects to make the script easy to understand.
Use associative arrays to quickly access each object in the script.
One of the main problems with image transformation using JavaScript is that it does not tell the browser to download the image until it needs to change the image. If you have a large image and want to call it out when the mouse slides through an image, the browser has to temporarily download the image, which may take a certain amount of time to greatly reduce the sliding effect.
If your connection speed is slow and you are going to tune in to a pretty large image, then you have to wait after putting the mouse on the image. Since some browsers require that the image being called must be saved in the buffer, sometimes you may not see the effect of image transformation at all. To avoid these annoying problems, we can preload the image we want to convert when the page is input.
When programming in web, preloading is a technology that downloads images to cache before they are needed. In this way, it is possible to quickly restore the image from the cache and display it immediately when it is really necessary.
Preloading images is actually not difficult. All you have to do is create a new image object and set the image name to be preinstalled as the image src attribute, as shown below:
var an_image = new Image();
an_image.src = "my_nice_image.gif";
By setting the image src attribute, you can automatically download the image to your hard drive (of course, assuming your cache can be used), and then when the image is transformed, you can directly read the image from the hard drive without downloading it.
The only thing left to do is how to make preinstalled images happen after the page is downloaded and before the image transformation operation. What makes it pleasant is that it is very simple. The body tag in HTML has an event handler called onLoad, which will be called when the page is called. If your body tag looks like this:
<body onLoad="doPreload();">
Then the doPreload() function will be called after the web page is downloaded. The code of the function is as follows:
function doPreload()
{
var the_images = new Array(,,);
preloadImages(the_images);
}
function preloadImages(the_images_array) {
for(loop = 0; loop < the_images_array.length; loop++)
{
var an_image = new Image();
an_image.src = the_images_array[loop];
}
}
The doPreload() function creates an array of image names that need to be pre-installed, and passes the array as parameters to the preloadImages() function. The preloadImages() function contains a loop, each loop creates a new image object and sets the image name to its src property.
Not very difficult, right? Image objects are quite useful, right? I'm glad you think so, take a break and we're about to enter a more exciting and brain-wrenching topic: creating your own object.
Use JavaScript to speed up image exchange.
Create your own objects to make the script easy to understand.
Use associative arrays to quickly access each object in the script.
One of the main problems with image transformation using JavaScript is that it does not tell the browser to download the image until it needs to change the image. If you have a large image and want to call it out when the mouse slides through an image, the browser has to temporarily download the image, which may take a certain amount of time to greatly reduce the sliding effect.
If your connection speed is slow and you are going to tune in to a pretty large image, then you have to wait after putting the mouse on the image. Since some browsers require that the image being called must be saved in the buffer, sometimes you may not see the effect of image transformation at all. To avoid these annoying problems, we can preload the image we want to convert when the page is input.
When programming in web, preloading is a technology that downloads images to cache before they are needed. In this way, it is possible to quickly restore the image from the cache and display it immediately when it is really necessary.
Preloading images is actually not difficult. All you have to do is create a new image object and set the image name to be preinstalled as the image src attribute, as shown below:
var an_image = new Image();
an_image.src = "my_nice_image.gif";
By setting the image src attribute, you can automatically download the image to your hard drive (of course, assuming your cache can be used), and then when the image is transformed, you can directly read the image from the hard drive without downloading it.
The only thing left to do is how to make preinstalled images happen after the page is downloaded and before the image transformation operation. What makes it pleasant is that it is very simple. The body tag in HTML has an event handler called onLoad, which will be called when the page is called. If your body tag looks like this:
<body onLoad="doPreload();">
Then the doPreload() function will be called after the web page is downloaded. The code of the function is as follows:
function doPreload()
{
var the_images = new Array(,,);
preloadImages(the_images);
}
function preloadImages(the_images_array) {
for(loop = 0; loop < the_images_array.length; loop++)
{
var an_image = new Image();
an_image.src = the_images_array[loop];
}
}
The doPreload() function creates an array of image names that need to be pre-installed, and passes the array as parameters to the preloadImages() function. The preloadImages() function contains a loop, each loop creates a new image object and sets the image name to its src property.
Not very difficult, right? Image objects are quite useful, right? I'm glad you think so, take a break and we're about to enter a more exciting and brain-wrenching topic: creating your own object.