直接将Javascript图像对象分配给页面 [英] Assign Javascript image object directly to page

问题描述

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

我希望保证图像被加载，所以我想将它加载到一个Javascript图像对象中，并在内存中存储数据，然后直接将其添加到页面。

这可能吗？

干杯，伊恩。

解决方案 div>

您可以创建image元素，并在加载后直接将其添加到DOM中：

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

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/

这篇关于直接将Javascript图像对象分配给页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！