New Image() mit src "on the fly" erstellen?

[Peadey]

Hallo,

ich möchte ein Array mit Images "on the fly" erstellen.
Kann mir jemand sagen, wie ich dafür folgenden Code abgekürzt erstellen kann?

  
var a = new Array();  
var img = new Image();  
img.src = "bild.jpg";  
a.push(img);

usw.
Irgendwie so dachte ich, aber wie muss die Syntax richtig sein?:

[{new Image(); src = "bilder/cleofide/bild1.jpg"}, ...]

Danke!

[ChrisB]

Hi,

ich möchte ein Array mit Images "on the fly" erstellen.
Kann mir jemand sagen, wie ich dafür folgenden Code abgekürzt erstellen kann?

var a = new Array();
var img = new Image();
img.src = "bild.jpg";
a.push(img);

>   
> usw.  
> Irgendwie so dachte ich, aber wie muss die Syntax richtig sein?:  
>   
> `[{new Image(); src = "bilder/cleofide/bild1.jpg"}, ...]`{:.language-javascript}  
  
new Image() liefert dir ein neues Image-Objekt - wenn du diesen Ausdruck noch mal klammerst, kannst du auch auf Eigenschaften dieses Image-Objektes zugreifen:  
~~~javascript
(new Image()).src = "xyz"; // bzw. auch so -  
(new Image).src = "xyz";   // die runden Klammern hinter dem Konstruktur-Aufruf  
                           // können entfallen, wenn keine Parameter übergeben werden

Allerdings liefert dir dieser Zuweisungsausdruck jetzt den Inhalt der Zuweisung zurück, also hier das "xyz" - und damit hast du die Möglichkeit verspielt, dein Image-Objekt ins Array einzufügen.

Wenn du unbedingt meinst, an obigem Code etwas abkürzen zu müssen - dann schreibe eine Funktion, die den Inhalt des src-Attributes als Parameter übergeben bekommt; die ein neues Image erzeugt, den src-Wert zuweist, und dann das Image zurückgibt.

MfG ChrisB

[Peadey]

Prima. Dann müsste das einfügen in ein Array a doch so gehen, oder?

a = [{(new Image()).src='bild1.jpg'}, {(new Image()).src='bild2.jpg'}, ...]

[ChrisB]

Hi,

Prima. Dann müsste das einfügen in ein Array a doch so gehen, oder?

a = [{(new Image()).src='bild1.jpg'}, {(new Image()).src='bild2.jpg'}, ...]

Nein.
Zumal die geschweiften Klammern dort syntaktisch falsch sind.

MfG ChrisB

[molily]

a = [{(new Image()).src='bild1.jpg'}, {(new Image()).src='bild2.jpg'}, ...]

Selbst wenn du die geschweiften Klammern weglassen würdest, würdest du nicht die Image-Objekte, sondern die src-Strings im Array speichern.

[ (new Image).src = "bla" ]
ergibt natürlich
[ "bla" ]
weil eine Wertzuweisung den zugewiesenen Wert ergibt.

Mathias

[Peadey]

Wenn du unbedingt meinst, an obigem Code etwas abkürzen zu müssen - dann schreibe eine Funktion, die den Inhalt des src-Attributes als Parameter übergeben bekommt; die ein neues Image erzeugt, den src-Wert zuweist, und dann das Image zurückgibt.

MfG ChrisB

Gut, so habe ich es gemacht.

[molily]

Wenn du unbedingt meinst, an obigem Code etwas abkürzen zu müssen - dann schreibe eine Funktion, die den Inhalt des src-Attributes als Parameter übergeben bekommt; die ein neues Image erzeugt, den src-Wert zuweist, und dann das Image zurückgibt.

Nun wäre

erzeugeBild("a.jpg");
erzeugeBild("b.jpg");
erzeugeBild("c.jpg");
erzeugeBild("d.jpg");
erzeugeBild("e.jpg");

auch nicht sonderlich besser.

Eher schon eine Liste mit den Bild-URIs:

var bilder = ["a.jpg", "b.jpg", "c.jpg", "d.jpg", "e.jpg"];

Und eine Funktion, die diese Liste abarbeitet bzw. ein »Map« macht, das jeden Eintrag der Liste in ein Bildobjekt mit eben dieser URI umwandelt.

Mathias