Fehlende img-Datei überspringen

[Gunnar Bittersmann]

@@JürgenB

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

Ich auch – mit dem Fetch-API, was ich hier für den besseren Trick halte:

☞ Codepen. Und ja, das funktioniert auch lokal übers Dateisystem.

Dabei habe ich das erste Beispiel von der fetch()-Seite übernommen und geringfügug modifiziert, sodass ein neues li-Element mit img darin generiert wird:

			listElement.insertAdjacentHTML('beforeend', `
				<li>
					<img src="${…}" alt=""/>
				</li>
			`);

(insertAdjacentHTML() FTW, das macht die Sache einfacher als jedes Element einzeln erzeugen, jedes Attribut einzeln setzen und dann alles ins DOM zu hängen.)

Und das Ganze in eine Funktion gepackt, die sich selbst wieder aufruft – fast wie bei dir; nur dass meine Funktion den Index als Parameter hat:

fetchTarget(1);

function fetchTarget(index)
{
	// …
	fetchTarget(index + 1);
}

Du steuerst das über eine globale Zählvariable – find ich unschön:

let count = 1;
showImg();

function showImg()
{
	// …
	count++;
	showImg();
}

LLAP 🖖