Image caching with html, JAVA Programming

In the airplane program, you may have noticed that the loading of each image appears to be jerky, erratic, or slow, and that the URL for each image flickers in the status bar each time the image changes. This happens because JavaScript does not save a copy of the image in memory that can be used whenever necessary. Instead, each time a different image is loaded by an element, JavaScript must open or reopen the image from its source. You probably accessed the airplane image files directly from the Data Disk on your local computer, and if you have a particularly fast computer, you may not have noticed a loading problem. If you did notice erratic loading of the images, then you can imagine how erratic and slow the animation would appear if you had to download the images from the Web server each time they are loaded. A technique for eliminating multiple downloads of the same file is called image caching. Image caching temporarily stores image files in memory on a local computer. This technique allows JavaScript to store and retrieve an image from memory rather than download the image each time it is needed.

Images are cached using the Image() constructor of the Image object. The Image() constructor creates a new Image object. There are three steps for caching an image in JavaScript:

1. Create a new object using the Image() constructor.

2. Assign a graphic file to the src property of the new Image object.

3. Assign the src property of the new Image object to the src property of an element.

In the following code, the src attribute of the element named myImage is initially set to an empty string "". In the script section, a new Image object named newImage is created. The newImage object is used to save and access the memory cache containing the image file. A file named graphic.jpg is assigned to the src property of the newImage object. The src property of the newImage object is then assigned to the src property of the element.

Be sure to understand that in the preceding code, the graphic.jpg file is not assigned directly to the src property of the element. Instead, the newImage object is assigned to the src property of the element. If you assigned the graphic.jpg file directly to the src property of the element using the statement document.myImage.src = "graphic.jpg";, then the file would reload from its source each time it was needed. The newImage object opens the file once and saves it to a memory cache.

The following code shows a version of the unicycle animation code modified to use image caching. The lines that add each image file to the unicycle[] array have been replaced by a for loop, which assigns a new object to each element of the unicycle[] array until the loadImages variable is greater than the length of the array. In the while loop, each object in the unicycle[] array is assigned an image file using the src property. In the turn() function, the unicycle[curUnicycle] operator in the statement document.images[0].src = unicycle [curUnicycle]; now includes the src property so that the statement reads document.images.

Posted Date: 2/26/2013 5:02:49 AM | Location : United States

Related Discussions:- Image caching with html, Assignment Help, Ask Question on Image caching with html, Get Answer, Expert's Help, Image caching with html Discussions

Write discussion on Image caching with html
Your posts are moderated
Related Questions
What is ARPANET and who developed it? ARPANET stands for Advanced Research Projects. The initial reasons were to communicate along with and share computer resources between mainl

Explain the term Event Handler? An event handler is a command that calls a function while an event happens, like as the user clicking a button.

Describe Member Variables vs. Local Variables ? class Car { String licensePlate = ""; // member variable double speed; = 0.0; // member variable double maxSp

Explain how several ways businesses monitor their employees? Systems are available in which monitor or most every key stroke which an employee forms on computer. Systems are av

In programming, what is an object? Object is a named collection of properties (data and state) & methods (instructions, behaviour). Objects are key to understanding object-orie

Struts framework is an open-source framework for producing the web applications in Java EE, based on MVC-2 architecture. It uses and extends the Java Servlet API. Struts are robust

What is difference between Design and System Architecture? System architecture is the conceptual design which defines the structure and/or behavior of a system. Whereas designs

Question 1: (a) What are the disadvantages of using HTML Frames in your web pages? (b) Give five examples of controls used inside HTML forms and the situation in which the

Write a Java program called SalesInfoMiner that reads in a file of products, stored in text format (2 lines per entry). The program must then read in information about past sales t

Corporate Web Support: Worked for CGI as Software Engineer in a team called CWS (Corporate Web Support). We support more than 400 applications for BELL Corporate. Here tas