在JavaScript中創建多個圖像對象

我使用JavaScript進行編程，我想知道是否有創建多個圖像對象的「最佳」方法。以下面的代碼爲例。在JavaScript中創建多個圖像對象

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

這是做到這一點的唯一途徑，或者我應該做這樣的事情......

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

我只是想知道是否有這樣做的第一種方法的不同方式。我發現我的程序中包含更多'new Image()'變量，我認爲重複性對代碼不利。

來源

2012-11-16 JaPerk14

最好的最常見？最快最快？儘量使用最少量的代碼？定義最佳。 – j08691

「最好」的方式來組織代碼，以便可能使用的代碼更少，並有助於加快代碼的速度。 – JaPerk14

基本上這種方法在大多數語言中都會生成一個淺拷貝 - 你會得到很多指向同一個對象的變量。另一個問題是 - 如果你創建的對象是不可變的。 – Bakudan

我可能會將它們構建爲一個數組，而不是用一堆指向不同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-16 01:43:00

你會如何使用這種方法添加一個.src到圖像？它會像imgs [0] .src =「」？ – JaPerk14

@ JaPerk14是的，確切地說，參見上文。 –

我不確定我是否正確理解您的問題。如果代碼需要，我認爲根本不會將三個變量聲明爲三個不同的new Image()。實際上，我非常喜歡它，因爲它讓代碼在我看來更具可讀性。

不過，如果你設置上做有些不同，你可以試試這個：

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-16 01:45:44 RadicalRaid

它需要一些更多的點擊，但[**這個測試案例**]（http://jsperf.com/new-image-vs-clonenode）建議'.cloneNode（）在操作中略微擊敗'new Image（）' /秒。 –

第二種方式是相同圖像。

如果你說：

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-16 01:48:47 Norguard

在JavaScript中創建多個圖像對象

回答

相關問題