Fallback-Image und Timeout – Externer Inhalt. Javascript

Lesezeit: 1 Minute

Was ist der beste Weg, um ein lokales Fallback-Image einzurichten, wenn das externe Image nicht geladen wird oder das Laden zu lange dauert.

  • Brillant! Ich wollte gerade dieselbe Frage stellen, und ich habe eine schnelle Google-Suche durchgeführt und diese Frage gefunden. Ich dachte daran, es serverseitig zu machen, aber die Clientseite klingt viel einfacher.

    – Geschicklichkeitsdrick

    14. Januar 2010 um 12:18 Uhr

Benutzer-Avatar
Craig Stuntz

Sie können eine hinzufügen onerror Handler:

<img
  src="http://example.com/somejpg.jpg"
  onerror="this.onerror = null; this.src="./oops.gif""
/>

Hinweis: Einstellung onerror im Handler auf null setzen, damit die Webseite nicht abstürzt, wenn oops.gif kann aus irgendeinem Grund nicht geladen werden.

  • Oh, ich habe onerror vergessen. Dies könnte einfacher sein, aber die Lösung, die ich unten gepostet habe, ermöglicht es, die Bilder vorab zwischenzuspeichern und ihre Verfügbarkeit zu überprüfen, bevor sie angezeigt werden müssen. Kommt drauf an was du brauchst…

    – moxn

    19. Oktober 2009 um 14:23 Uhr

  • Genial! Ich liebe es, wenn ich neue Tricks wie diesen lerne. Ich wollte auf etwas jQuery-Jiggery-Pokery zurückgreifen.

    – MikeMurko

    25. Februar 2012 um 18:51 Uhr

  • Das Problem hierbei ist der Zeitpunkt, zu dem das Bild als nicht verfügbar angesehen wird! Es kann lange dauern, bis das Laden der Browseraktivität funktioniert, bis es aufgerufen wird onerror Veranstaltung.

    – SaidbakR

    31. Dezember 2015 um 17:25 Uhr

  • Ich danke dir sehr. es ist sehr fantastisch

    – Albaz

    5. November 2019 um 10:06 Uhr


Versuchen Sie, die Eigenschaft Image.complete zu verwenden.

var img = new Image(w,h)
img.src = "http://...";

Überprüfen Sie jetzt regelmäßig, ob img.complete wahr ist, und nennen Sie einen Fallback-Mechanismus, sollte es immer noch so sein false nach n Sekunden.

1019270cookie-checkFallback-Image und Timeout – Externer Inhalt. Javascript

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy