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 el
Solution 1:
You can create the image element and append it directly to the DOM once it has loaded:
var image = newImage();
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/
Solution 2:
See:
<html><head><scriptlanguage = "JavaScript">functionpreloader()
{
heavyImage = newImage();
heavyImage.src = "heavyimagefile.jpg";
}
</script></head><bodyonLoad="javascript:preloader()"><ahref="#"onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'"><imgname="img01"src="justanotherfile.jpg"></a></body></html>Reference:
http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317
Solution 3:
if (document.images) {
var preload_image_object = newImage();
var image_urls = newArray();
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;
}
}
Post a Comment for "Assign Javascript Image Object Directly To Page"