3

私はJavaScriptでプログラミングしていますが、複数の画像オブジェクトを作成するための「最良の」方法があるかどうか知りたいです。以下のコードを例として取り上げます。

var a = new Image();
var b = new Image();
var c = new Image();

これがそれを行う唯一の方法ですか、それとも私は次のようなことをする必要があります...

var a = new Image(), b = a, c = a;

最初の方法を行う別の方法があるかどうか疑問に思っています。私のプログラムにはもっとたくさんnew Image()の変数が含まれていることがわかり、繰り返しを繰り返すことはコードにとって悪いことだと思いました。

4

3 に答える 3

2

私はあなたの質問を正しく理解しているかどうかわかりません。new Image()コードで必要な場合は、3つの変数を3つの異なる変数として宣言することに何も問題はないと思います。実際、私の意見ではコードが読みやすくなるので、私は非常に気に入っています。

ただし、多少異なる方法で実行する場合は、次の方法を試すことができます。

var a = new Image(), b = a.cloneNode( true ), c = a.cloneNode( true );

しかし、これはあまり読みやすいとは思いません。

コードで許可されている場合は、リストで初期化することもできます。これはおそらく推奨される方法です。

var images = [];
for( var index = 0; index < 10; index++ ) {
    images.push( new Image() );
}
于 2012-11-16T01:45:44.513 に答える
1

Image異なるオブジェクトを指す個別の変数の山で名前空間を汚染するのではなく、おそらくそれらを配列として構築します。

var imgs = [];
var numImgs = 10;
// In a loop, build up an array of Image objs
for (var i=0; i<numImgs; i++) {
  imgs.push(new Image());
  // Initialize properties here if necessary
  imgs[i].src = 'http://example.com';
}
// imgs now holds ten Image objects...
// Access them via their [n] index
img[3].src = 'http://stackoverflow.com';

これは、複数の変数を作成するよりも多かれ少なかれ効率的ではありませんが、それらを整理しておく方が確かに簡単です。それらを初期化する際に数行のコードを節約しますが、長期的には、それはごくわずかな効果しか持たないマイクロ最適化になります。

それぞれにテキスト記述子が本当に必要な場合は、配列の代わりにImageオブジェクトを使用して、そのプロパティを小さな記述文字列に設定できることに注意してください。配列を介して初期化することもできます。{}[]

var imgNames = ['stackoverflow','google','example'];
var imgs = {}
// Initialize object properties in a loop
for (var i=0; i<imgNames; i++) {
  // Initialize a property in the object from the current array value using [] notation
  imgs[imgNames[i]] = new Image();
}
// Then you can access them by their property name:
imgs.google.src = 'http://www.google.com';
imgs.stackoverflow.src = 'http://stackoverflow.com';

これは、PHPまたはPerlの連想配列のように動作するオブジェクトの誤用に少し国境を接しますが、上記の配列メソッドのように数字キーではなく名前で画像が必要な場合は、画像に簡単にアクセスできます。

于 2012-11-16T01:43:00.253 に答える
0

2番目の方法は同じ画像です。

もし、あなたがそう言うなら：

b = a;
c = b;

また、aがオブジェクトの場合、bおよびcは同じオブジェクトを指す単なる参照です。

画像を読み込む関数を作ってみませんか？

function loadImage(name, optionalCallback) {
    var img = new Image();
    if (typeof optionalCallback === "function") { img.onload = optionalCallback; }
    img.src = name;

    return img;
}

次に、あなたは言うことができます：

var a = loadImage("images/image01.png", function () { document.body.appendChild(this); }),
    b = loadImage("images/image02.jpg", function () { gallery.addImage(this); });

これを使ってできることはもっとたくさんあります。さらに進んPromisesでいくと、これらの画像を使って非常に多くのことができます。

また、次のようなプログラムを作成している場合は注意が必要です。

var a = new Image();
a.src = "images/image01.jpg";
document.getElementById("gallery").appendChild(a);

画像をページに追加しているコードの部分に到達すると、画像の読み込みが完了する前に、予期しない結果が生じる可能性があります。

于 2012-11-16T01:48:47.557 に答える