Assign Javascript image object directly to page_问答_开发者

Assign Javascript image object directly to page

开发者 https://www.devze.com 2023-03-12 04:31 出处：网络

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 elemen

相关专题：javascript

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.

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/

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

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