CODEWITHSUNDEEP
javascripthtml
Ian Warburton
Ian Warburton

Reputation: 15686

Assign Javascript image object directly to page

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 HTML element and my understanding is that the actual image data is coming from the browser cache in the filing system.

I want to guarantee that the image is loaded so I want to load it into a Javascript image object have the data in memory and then add it directly to the page.

Is this possible?

Cheers, Ian.

Upvotes: 1

Views: 7373

Answers (3)

Rakesh Sankar
Rakesh Sankar

Reputation: 9415

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

Upvotes: 1

Niklas
Niklas

Reputation: 30002

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/

Upvotes: 7

Michael Robinson
Michael Robinson

Reputation: 29498

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;
   }
}

Upvotes: 0

Related Questions