Fehlende img-Datei überspringen
bearbeitet von JürgenBHallo,
der Trick besteht darin, das jedes Bild über das onload-Event das nächste lädt. Wenn es kein nächstes mehr gibt, gibt es auch kein onload-Event mehr. Ich habe da mal etwas gebastelt:
Script:
~~~JavaScript
window.addEventListener("DOMContentLoaded", function() {
var serienBilder = function(container_id,basisname,platzhalter,zählerstart) {
const bildcontainer = document.getElementById(container_id);
let count = zählerstart;
const showImg = function() {
let name = basisname.replace(platzhalter,count);
let image = document.createElement("img");
image.onload = function() {
count ++;
showImg();
};
image.src = name;
image.alt = " ";
bildcontainer.appendChild(image);
}
showImg();
}
serienBilder("bilder","An.png","n",1); // A1.png, A2.png, ..., A10.png, ...
},false);
~~~
HTML:
~~~HTML
<figure id="bilder"></figure>
~~~
Links zur Doku:
* [addEventListener](https://wiki.selfhtml.org/wiki/JavaScript/DOM/EventTarget/addEventListener)
* [DOMContentLoaded](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/DOMContentLoaded)
* [getElementById](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/getElementById)
* [replace](https://wiki.selfhtml.org/wiki/JavaScript/Objekte/String/replace)
* [createElement](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/createElement)
* [appendChild](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node/appendChild)
Eventhandler können mit `element.addEventListener("Event"`, … eingerichtet werden oder auch mit `element.onEvent = …`.
Sie es dir mal an und versuch zu verstehen, was da passiert.
Gruß
Jürgen
Fehlende img-Datei überspringen
bearbeitet von JürgenBHallo,
der Trick besteht darin, das jedes Bild über das onload-Event das nächste lädt. Wenn es kein nächstes mehr gibt, gibt es auch kein onload-Event mehr. Ich habe da mal etwas gebastelt:
Script:
~~~JavaScript
window.addEventListener("DOMContentLoaded", function() {
var serienBilder = function(container_id,basisame,platzhalter,zählerstart) {
const bildcontainer = document.getElementById(container_id);
let count = zählerstart;
const showImg = function() {
let name = basisame.replace(platzhalter,count);
let image = document.createElement("img");
image.onload = function() {
count ++;
showImg();
};
image.src = name;
image.alt = " ";
bildcontainer.appendChild(image);
}
showImg();
}
serienBilder("bilder","An.png","n",1); // A1.png, A2.png, ..., A10.png, ...
},false);
~~~
HTML:
~~~HTML
<figure id="bilder"></figure>
~~~
Links zur Doku:
* [addEventListener](https://wiki.selfhtml.org/wiki/JavaScript/DOM/EventTarget/addEventListener)
* [DOMContentLoaded](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/DOMContentLoaded)
* [getElementById](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/getElementById)
* [replace](https://wiki.selfhtml.org/wiki/JavaScript/Objekte/String/replace)
* [createElement](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/createElement)
* [appendChild](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node/appendChild)
Eventhandler können mit `element.addEventListener("Event"`, … eingerichtet werden oder auch mit `element.onEvent = …`.
Sie es dir mal an und versuch zu verstehen, was da passiert.
Gruß
Jürgen
Fehlende img-Datei überspringen
bearbeitet von JürgenBHallo,
der Trick besteht darin, das jedes Bild über das onload-Event das nächste lädt. Wenn es kein nächstes mehr gibt, gibt es auch kein onload-Event mehr. Ich habe da mal etwas gebastelt:
Script:
~~~JavaScript
window.addEventListener("DOMContentLoaded", function() {
var serienBilder = function(container_id,basisame,platzhalter,zählerstart) {
const bildcontainer = document.getElementById(container_id);
let count = zählerstart;
const showImg = function() {
let name = basisame.replace(platzhalter,count);
let image = document.createElement("img");
image.onload = function() {
count ++;
showImg();
};
image.src = name;
image.alt = " ";
bildcontainer.appendChild(image);
}
showImg();
}
serienBilder("bilder","An.png","n",1); // A1.png, A2.png, ..., A10.png, ...
},false);
~~~
HTML:
~~~HTML
<figure id="bilder"></figure>
~~~
Links zur Doku:
* [addEventListener](https://wiki.selfhtml.org/wiki/JavaScript/DOM/EventTarget/addEventListener)
* [DOMContentLoaded](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/DOMContentLoaded)
* [getElementById](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/getElementById)
* [replace](https://wiki.selfhtml.org/wiki/JavaScript/Objekte/String/replace)
* [createElement](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/createElement)
* [appendChild](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node/appendChild)
Eventhandler können mit element.addEventListener("Event", … eingerichtet werden oder auch mit `element.onEvent = …`.
Sie es dir mal an und versuch zu verstehen, was da passiert.
Gruß
Jürgen