To force an image to be cached, we create an off-screen image and load the desired image into it. Then, when the image is required on-screen, we know it will be quickly loaded from the cache rather than slowly loaded over the network. Example 16.1 shows code that performs a simple animation using this technique.
<!-- The image that will be animated. Give it a name for convenience --> <IMG SRC="images/0.gif" NAME=animation> <SCRIPT> // Create a bunch of off-screen images, and get them started // loading the images we're going to animate. images = new Array(10); for(var i = 0; i < 10; i++) { images[i] = new Image(); // Create an Image object images[i].src = "images/" + i + ".gif"; // tell it what URL to load } // Later, when we want to perform our animation, we can use these URLs, // knowing that they've been loaded into the cache. Note that we perform // the animation by assigning the URL, not the Image object itself. // Also note that we call the image by name, rather than as document.images[0]. function animate() { document.animation.src = images[frame].src; frame = (frame + 1)%10; timeout_id = setTimeout("animate()", 250); // display next frame later } var frame = 0; // Keep track of what frame of the animation we're on. var timeout_id = null; // This allows us to stop the animation. </SCRIPT> <FORM> <!-- Buttons to control the animation --> <INPUT TYPE=button VALUE="Start" onClick="if (timeout_id == null) animate()"> <INPUT TYPE=button VALUE="Stop" onClick="if (timeout_id) clearTimeout(timeout_id); timeout_id=null;"> </FORM>
Example 16.1 demonstrates the important steps involved in creating an off-screen image for image caching. The first step is to create an Image object with the Image() constructor. The second step is to assign the URL of the desired image to the src property of the newly created Image object. Doing so will cause the browser to start loading the contents of the specified URL, which, unless caching is turned off, will cause the image to be loaded into the cache, even though it is not displayed anywhere.
A confusing detail about the use of off-screen Image objects is that they are not themselves directly used for anything. To perform image replacement with an off-screen Image object, you do not assign the Image object directly into the images[] array of the Document object. Instead, you simply set the src property of the desired on-screen image to the URL of the desired image. If this URL has previously been loaded by an off-screen image, then the the desired image should be in the cache and the on-screen image replacement will happen quickly. The off-screen image object is used to force the image to be loaded, but there isn't anything else that you can do with it.
file: /Techref/language/java/script/definitive/ch16_02.htm, 6KB, , updated: 2019/10/14 16:00, local time: 2024/8/22 22:21,
3.137.173.62:LOG IN
|
©2024 These pages are served without commercial sponsorship. (No popup ads, etc...).Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE. Questions? <A HREF="http://piclist.com/tecHREF/language/java/script/definitive/ch16_02.htm"> [Chapter 16] 16.2 Off-Screen Images and Caching</A> |
Did you find what you needed? |
![]() o List host: MIT, Site host massmind.org, Top posters @none found - Page Editors: James Newton, David Cary, and YOU! * Roman Black of Black Robotics donates from sales of Linistep stepper controller kits. * Ashley Roll of Digital Nemesis donates from sales of RCL-1 RS232 to TTL converters. * Monthly Subscribers: Gregg Rew. on-going support is MOST appreciated! * Contributors: Richard Seriani, Sr. |
Welcome to piclist.com! |
.