Erstellen und Laden von Bildern mit einer Schleife in Javascript

meine Entschuldigung, aber ich bin schwerer Anfänger.

bitte kann mir jemand sagen wie es möglich ist, eine Schleife verwenden, die Bilder laden?

d.h. schreiben Sie den folgenden code, um eine Schleife verwenden, um den Prozess zu automatisieren.

function loadimages() {
    pic00 = new Image;
    pic00.src = "images/IMG_0019.jpg";

    pic01 = new Image;
    pic01.src = "images/IMG_0020.jpg";

    pic02 = new Image;
    pic02.src = "images/IMG_0021.jpg";

    pic03 = new Image;
    pic03.src = "images/IMG_0022.jpg";

    pictures = new Array(4);
    pictures[0] = pic00;
    pictures[1] = pic01;
    pictures[2] = pic02;
    pictures[3] = pic03;
}

Habe ich gesehen, kann die Beiträge, die beschreiben ähnliche Dinge, aber ich fürchte, ich bin zu dumm um Sie zu verstehen. Jede Hilfe zu schätzen.

Hinsichtlich

Du bist nicht zu dumm, um zu verstehen, Sie müssen nur die Zeit nehmen, um die Sprache zu lernen oder gehen Sie durch die tutorials. Sie müssen wahrscheinlich suchen in "for" - Schleifen

InformationsquelleAutor hazard77 | 2013-05-30

3

Dies tun würde:

JS:
```
var URLs = [
  "http://placehold.it/128x128.png/f00/400?text=Red",
  "http://placehold.it/128x128.png/0f0/040?text=Green",
  "http://placehold.it/128x128.png/00f/004?text=Blue",
  "http://placehold.it/128x128.png/ff0/440?text=Yellow"
];

var imgs = URLs.map(function(URL) {
  var img = new Image();
  img.src = URL;
  document.body.appendChild(img);
  return img;
});
```
Demo
- Es ist erwähnenswert, dass die forEach-Methode für arrays wird nicht unterstützt in IE < 9 - es gibt Wege, die Sie selbst hinzufügen, oder Sie können eine Bibliothek (underscore, jQuery), um Ihnen ähnliche Werkzeuge.
- genial ist. Wenn Sie wollen browser-support-nutzen, ein polyfill.
- Vereinbart, es ist genial! Ich schaue zurück auf all die var i = 0; i < array.length; i++ in meiner Vergangenheit, und zu Weinen...
- wenn Sie verwendet werden .Karte statt .forEach, würden Sie nicht brauchen, die extra array , push () - Aufruf, oder das Ziel Verschluss... jus sayin...
- Schön! Darüber vergessen. Antwort aktualisiert.
InformationsquelleAutor Web_Designer
2

Für Ihr Beispiel, Sie benötigen einige Möglichkeit zu wissen, was jeder der die Bild-Pfade/Dateinamen sind (da Sie nicht IMG_001.jpg, 002.jpg, etc). Eine einfache, aber low-tech Weg zu packen, die Dateinamen in ein array zu handeln, als die Quelle unserer Informationen:
```
//Pack the image filenames into an array using Array shorthand
var imageFiles = ['IMG_0019.jpg', 'IMG_0020.jpg', 'IMG_0021.jpg', 'IMG_0022.jpg'];
```
Dann ist es eine Sache der Schleife über jedes element im array, und erstellen Sie ein Bild-element für jeden. Wir erstellen image-element, und pack es in das Letzte array in einem Schritt:
```
//Loop over an array of filenames, and create an image for them, packing into an array:
var pictures = []; //Initialise an empty array

for (var i = 0, j = imageFiles.length; i < j; i++) {
    var image = new Image; //This is a placeholder
    image.src = 'images/' + imageFiles[i]; //Set the src attribute (imageFiles[i] is the current filename in the loop)
    pictures.push(image); //Append the new image into the pictures array
}

//Show the result:
console.log(pictures);
```
Dies ist der code geschrieben, um einfach zu sein zu verstehen, nicht effizient sein. insbesondere die for (i in Dokumenten) getan werden könnte effizienter sein, aber der Vorteil dieser Art der Schleife ist, dass es kann verwendet werden, auf etwas (Objekte, arrays, strings). Es ist ein gutes Allzweck-tool, während Sie lernen. Siehe @Web_designer verknüpften Frage aus Gründen, die der for x in y - Schleife kann zu Problemen führen. Die for-Schleife syntax ist hier ziemlich viel "classic Vanille" von array-Schleifen in JS.

Auch, wenn Sie Ihre Bild-Datei-Namen sind immer numerische-und sequentielle, die Sie in Anspruch nehmen konnten, aber 'Berechnung' Sie, anstelle von pre-Speicherung.

Lassen Sie uns wissen, wenn es etwas gibt, Sie wollen mehr Details!
- Sie sollten wahrscheinlich vermeiden, mit einem for...in Schleife für arrays: stackoverflow.com/questions/500504/...
- Gute call. Werde ich ändern: ich wollte für 'dies ist, was passiert', sondern als 'dies ist bereit zum kopieren/einfügen' - aber wohl besser, zu vermeiden, Lehre, dass man. Gut zu Lesen auf der verlinkten Frage, danke.
- Danke für Ihre Antwort. Ich habe noch nie verwendet ein message-board, wie dies vor. Ich bin wirklich erstaunt und dankbar für die Großzügigkeit von Euch allen, die geantwortet haben.
InformationsquelleAutor Beejamin
0

Wirklich hässlich, aber man könnte die onload - Attribut des Bildes zum ausführen einer javascript-Funktion:
```
<img id="imgToLoad" onload="loadNextImage();" src="image1.png"/>
```
Und Funktion verantwortlich sein könnte für das laden des nächsten Bildes:
```
function loadNextImage () {
   document.getElementById( "imgToLoad" ).src = "image2.png";
}
```
- Halten Sie im Verstand, daß dieses hässlich und ich würde vorschlagen, Sie verwenden eine der anderen Antworten. Dies ist jedoch eine alternative, so dass ich dachte, es sollte erwähnt werden, wie gut.
InformationsquelleAutor Shadow Man

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.