Caching of images using javascript image object
Using this script we can load an image in to a cache and display it when needed.Once you click the button the second image will display immediately with out any delay as it comes from the cache. If your internet connection is slow then you can see the difference clearly. If you are in a fast net then try to connect to a heavy image to get the difference in speed. Now check out our JavaScript image slide show. Here is the complete code for caching of image.
<html>
<head>
<title>Image Caching from mistonline.in</title>
<script language="JavaScript">
//refer mistonline.in for more detailed scripts
objImage = new Image();
function download(){
// preload the image file
objImage.src="http://www.youwebsitename.com/image/2326.jpg";
}
function displayimage(){
document.images[''im''].src = "http://www.youwebsitename.com/image/2326.jpg";
}
</script></head>
<body onLoad="download()">
<form name="f1?>
<img name="im" src=http://localhost/image/1263.jpg/><br />
<input type="button" name="Prev" value=" Show Image " onClick="displayimage()"/>
</form>
</body>
</html>
Related posts:
- Simple Javascript Slideshow
- Image preloader using CSS
- Using no-cache for Stop Caching in Firefox and Internet Explorer
- Replacing images with time intervals using jquery
- Php mysql example image gallery blob storage
- Caching of web page using php
- Simple PHP Captcha Image Verification or Validation
