19

これを行うためのより良い解決策があるかどうか知りたいだけです：

var img = new Image();
var div = document.getElementById('foo');

img.onload = function() {
  div.innerHTML += '<img src="'+img.src+'" />'; 
};

img.src = 'path/to/image.jpg';

望ましい方法：

console.log(img); // <img src="path/to/image.jpg" />
div.innerHTML += img;

考え？

4

2 に答える 2

41

私はあなたが欲しいものはこれだと思います：

var img = new Image();
var div = document.getElementById('foo');

img.onload = function() {
  div.appendChild(img);
};

img.src = 'path/to/image.jpg';

すでに画像オブジェクトが読み込まれています。でまったく新しい画像オブジェクトを作成するのではなく、DOMに直接追加する必要がありますinnerHTML。

さらに、+=withを使用するとinnerHTML、既存のすべてのオブジェクトが取得され、HTMLテキストに変換され、そのテキストに追加されてから、すべての新しいDOMオブジェクトが作成されるため、非常に無駄になります。新しいオブジェクトを作成すると、すべてのイベントハンドラーが失われます。これは、既存のDOMオブジェクトのセットに新しいDOMオブジェクトを追加するだけの方がはるかに効率的です。

さらにdocument.getElementById()、IDを#前に付けずに取得します。

于 2012-09-05T18:49:11.800 に答える
2

次の方法で使用できます。

var img = new Image();
var div = document.getElementById('theDiv');

img.onload = function() {
  div.appendChild(img);
};

img.src = 'path/to/image.jpg';
于 2012-09-05T18:50:00.350 に答える