Fehlende img-Datei überspringen

[JürgenB]

Hallo,

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:

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 ++;
				image.alt = " ";
				bildcontainer.appendChild(image);
				showImg();
			};
			image.src = name;
		}
		
		showImg();
	}
	
	serienBilder("bilder","An.png","n",1); // A1.png, A2.png, ..., A10.png, ...

},false);

HTML:

<figure id="bilder"></figure>

Links zur Doku:

• addEventListener
• DOMContentLoaded
• getElementById
• replace
• createElement
• 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

Edit: Ich habe das Script korrigiert, siehe Versionen.