Fehlende img-Datei überspringen
bearbeitet von 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](https://developer.mozilla.org/de/docs/Web/API/Fetch_API), was ich hier für den besseren Trick halte:
☞ [**Codepen**](https://codepen.io/gunnarbittersmann/pen/WBdYYM?editors=0010). Und ja, das funktioniert auch lokal.
Dabei habe ich das [erste Beispiel von der `fetch()`-Seite](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Examples) übernommen und geringfügug modifiziert, sodass ein neues `li`-Element mit `img` darin generiert wird:
~~~JavaScript
listElement.insertAdjacentHTML('beforeend', `
<li>
<img src="${…}" alt=""/>
</li>
`);
~~~
([`insertAdjacentHTML()` FTW](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML), 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:
~~~JavaScript
fetchTarget(1);
function fetchTarget(index)
{
// …
fetchTarget(index + 1);
}
~~~
Du steuerst das über eine globale Zählvariable – find ich unschön:
~~~JavaScript
let count = 1;
showImg();
function showImg()
{
// …
count++;
showImg();
}
~~~
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann