Question

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.

Answer 1

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/