Is it possible to assign a Javascript image object directly to the DOM? Every example I\'ve seen has the image object being loaded and then the same file name assigned to an HTM
You can create the image element and append it directly to the DOM once it has loaded:
var image = new Image();
image.onload = function(){
document.body.appendChild(image);
};
image.src = 'http://www.google.com/logos/2011/guitar11-hp-sprite.png';
example: http://jsfiddle.net/H2k5W/3/
if (document.images) {
var preload_image_object = new Image();
var image_urls = new Array();
image_urls[0] = "http://mydomain.com/image0.gif";
image_urls[1] = "http://mydomain.com/image1.gif";
image_urls[2] = "http://mydomain.com/image2.gif";
image_urls[3] = "http://mydomain.com/image3.gif";
var i = 0;
for(image_url in image_urls) {
preload_image_object.src = image_url;
}
}
See:
<html>
<head>
<script language = "JavaScript">
function preloader()
{
heavyImage = new Image();
heavyImage.src = "heavyimagefile.jpg";
}
</script>
</head>
<body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'">
<img name="img01" src="justanotherfile.jpg"></a>
</body>
</html>
Reference:
http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317