This loads images to an existing (already loaded) page using the method discusses in the Remote Scripting Images tutorial.
A new image is created using the document.createElement() method. The new image element is set to the remote image source, then when that image reports that it has loaded, the existing image element is replaced with the new image element.
Because the image is loaded remotely and not placed in the page until after it loads, there is no top to bottom rendering, as you might see when a page loads an image directly. A simple timer is used to load the different images.
This example page will stop after 15 image loads and not restart. This is to save bandwidth. Some people have let this run endlessly, polluting my web server logs with hundreds of entries.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Reading Images From The Server With No Preload And No Retrieving From The Browser Cache.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="en-US">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005-2010 Roderick Divilbiss">
<script type="text/javascript">
/*******************************************************************
* The Remote Image Loader
*******************************************************************/
function getImage(pExistingImageID, pImageURL){
var img = document.createElement('img');
img.onload = function (evt) {
document.getElementById(pExistingImageID).src=this.src;
document.getElementById(pExistingImageID).width=this.width;
document.getElementById(pExistingImageID).height=this.height;
}
img.src = pImageURL;
return false;
}
var currentImage = 1;
function rotateImage() {
var iSrc = '/asp/images/image' + currentImage + '.jpg';
getImage('mainImage',iSrc);
currentImage += 1;
if (currentImage==4) {
currentImage=1;
}
setTimeout('rotateImage();',2000);
}
</script>
</head>
<body onload="rotateImage();">
<p><img id="mainImage" border="0" src="images/image1.jpg" width="300" height="250"></p>
</body>
</html>
Date Validation Using JavaScript .
Cross-Browser Clipboard Copy .
Loading Images With Remote Scripting .
Why JavaScript In Hyperlinks Is Bad .
Change The Submit Button To Show Waiting For AJAX Response .
European Date Validation Using JavaScript .
Database Results To Client Side Array .
Reading Files With JavaScript .
AJAX For Plain Text And HTML .
