开发者

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.


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜