将Javascript图像对象直接分配给页面

时间:2011-06-10 12:29:22

标签: javascript html

是否可以将Javascript图像对象直接分配给DOM?我看到的每个例子都有加载的图像对象,然后分配给HTML元素的文件名相同,我的理解是实际的图像数据来自文件系统中的浏览器缓存。

我想保证图像已加载,所以我想将其加载到Javascript图像对象中,将数据存储在内存中,然后将其直接添加到页面中。

这可能吗?

干杯,伊恩。

3 个答案:

答案 0 :(得分:7)

您可以创建图像元素,并在加载后将其直接附加到DOM:

var image = new Image();
image.onload = function(){
    document.body.appendChild(image);
};
image.src = 'http://www.google.com/logos/2011/guitar11-hp-sprite.png';

示例:http://jsfiddle.net/H2k5W/3/

答案 1 :(得分:1)

请参阅:

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

参考:

  

http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

答案 2 :(得分:0)

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