Gif vor dem Laden eines iFrame anzeigen

[fl0rlAn]

Hallo liebes Forum,

ich habe folgendes Problem: Ich lasse auf meiner Website per iframe einen Inhalt von einer Fremd-Website einblenden. Etwa so: <iframe src="https://www.google.de/" width="100%" height="1250px" frameborder="0" name="google"></iframe>

Ich habe allerdings das Problem, dass der iframe später läd bzw. angezeigt wird, als der Inhalt meiner Seite. So fällt es natürlich jedem auf, dass es Fremdinhalt ist. Das der iframe so lange braucht, liegt an der Fremdseite. Nun habe ich mir gedacht oder wünsche ich mir, dass ich bevor der iframe geladen wurde einfach ein Gif mit Ladebalken oder ähnlichen anzeigen lasse.

Könnt ihr mir helfen, wie ich das hinbekomme? Alternativ reicht auch einfach ein Text der dann wieder verschwindet, wenn der iframe angezeigt wird.

Danke im Voraus. Florian

[Matthias Apsel]

Hallo fl0rlAn,

Ich lasse auf meiner Website per iframe einen Inhalt von einer Fremd-Website einblenden. Etwa so: <iframe src="https://www.google.de/" width="100%" height="1250px" frameborder="0" name="google"></iframe>

Hast du sichergestellt, dass du das auch darfst?

Ich habe allerdings das Problem, dass der iframe später läd bzw. angezeigt wird, als der Inhalt meiner Seite. So fällt es natürlich jedem auf, dass es Fremdinhalt ist.

Als Außenstehender finde ich das gut. Du willst dich doch nicht etwa mit fremden Federn schmücken?

Bis demnächst
Matthias

[fl0rlAn]

@Matthias

Hast du sichergestellt, dass du das auch darfst?

ich habe den Originallink ersetz durch einen Beispiellink (google.de) Den Originallink darf ich per iframe einbinden.

Du willst dich doch nicht etwa mit fremden Federn schmücken?

Hier geht es weniger um das "Schmücken" sondern eher darum Informationen bzw. einen Loginbereich auf meiner Seite darzustellen.

[Gunnar Bittersmann]

@@fl0rlAn

Ich lasse auf meiner Website per iframe einen Inhalt von einer Fremd-Website einblenden.

Die Berechtigung von Betreiber der fremden Website hast du dazu?

<iframe src="https://www.google.de/" width="100%" height="1250px" frameborder="0" name="google"></iframe>

Für Beispieldomains bitte eine der nach [BCP 32](http://tools.ietf.org/html/bcp32 dafür vorgesehenen) (wie bspw. example.net) verwenden.

Nun habe ich mir gedacht oder wünsche ich mir, dass ich bevor der iframe geladen wurde einfach ein Gif mit Ladebalken oder ähnlichen anzeigen lasse.

Nutzer sollen auf einen Ladebalken starren, anstatt wenigstens deine Inhalte sehen zu können? Ich glaube nicht, dass das die UX verbessert.

Könnt ihr mir helfen, wie ich das hinbekomme?

Das ist nicht unser Ziel.

Aber es ist möglich, per JavaScript und CSS deinen Inhalt zu verstecken, aufs load-Event des Iframes zu warten und dann deinen Inhalt anzuzeigen. Möglich heißt nicht sinnvoll.

LLAP 🖖

[fl0rlAn]

@Gunnar

Die Berechtigung von Betreiber der fremden Website hast du dazu?

Ja.

Für Beispieldomains bitte eine der nach BCP 32 (wie bspw. example.net) verwenden.

Danke für den Hinweis, war mir nicht bewusst.

Nutzer sollen auf einen Ladebalken starren, anstatt wenigstens deine Inhalte sehen zu können? Ich glaube nicht, dass das die UX verbessert.

Solange der iframe nicht geladen ist, zeigt die Website eine weiße Seite an. Es werden jedoch meine Inhalte, die um den definierten iframe sind, angezeigt.

Aber es ist möglich, per JavaScript und CSS deinen Inhalt zu verstecken, aufs load-Event des Iframes zu warten und dann deinen Inhalt anzuzeigen.

Du meinst also, dass ich künstlich meinen Inhalt verlangsame, damit beide Inhalte (iframe und meiner) gleichzeitig laden? Hatte ich mir auch schon überlegt, aber finde ich auch nicht so gut.

Gruß Florian

[Rolf b]

Hallo fl0rlAn,

nein, gemeint ist, dass Du den Frame versteckst und erst dann einblendest, wenn Du das load-Event bekommst. An der Stelle, wo der Frame ist, kannst Du bis dahin ja ein lustiges Bildchen anzeigen. Natürlich nur lizensiert oder gemeinfrei...

Deine eigene Seite künstlich zu bremsen bringt nichts, du weißt ja nicht, um wieviel.

Rolf

[fl0rlAn]

@Rolf

nein, gemeint ist, dass Du den Frame versteckst und erst dann einblendest, wenn Du das load-Event bekommst. An der Stelle, wo der Frame ist, kannst Du bis dahin ja ein lustiges Bildchen anzeigen.

Eigentlich ist genau das mein Vorhaben. als Bildchen habe ich ein Ladebalken bzw. Kreisel als animiertes Gif.

kannst du mir sagen, wie ich das machen kann?

[Rolf b]

Hallo fl0rlAn,

ich werde jetzt vermutlich wieder einen drüberbekommen, von wegen "so ist das aber nicht benutzbar und modernes HTML sieht anders aus", aber ich würd's so machen. Hoffentlich bekomme ich deswegen nicht von shutterstock eins drüber.

Beispiel

Nach längerem Probieren habe ich mit zdf.de eine https-Seite gefunden, die mich nicht wegen verletzter SameOrigin-Policy rausschmeißt.

Was NICHT funktioniert hat, war die Registrierung des Events in einer DOMContentLoaded-Funktion der Hauptseite (Ready-Handler), weil es dann ggf. erst registriert wird wenn der iframe schon geladen ist. Deshalb der obtrusive Script-Block im Haupt-HTML.

Rolf

[fl0rlAn]

@Rolf

Beispiel

Danke, das ist soweit schon super. In dem Beispiel wird jedoch das Bild wiederholend angezeigt. Ich habe dabei das Problem, dass mein Gif (Ladekreisel) nur 32x32 ist und mein iframe auf etwa 850x1250 definiert ist und das Gif somit hundertfach mal angezeigt wird.

Wie kann ich definieren, dass das Bild nur einmal angezeigt werden soll? Bestenfalls noch zentriert oben.

In deinen CSS definiert du den iframe auf 800x600 und den späteren Weblink auf 100%x100%. Somit schaffe ich bei Änderungen an deinem Code nur die Größe des gesamten iframes oder den später ladenen Weblink zu verändern. Aber nicht den Hintergrund (Bild).

Gruß Florian

[Rolf b]

Hallo fl0rlAn,

mein CSS definiert den Rahmen für den iframe auf 800x600. Diese Zahl hat mir mein Freund Rainer Zufall eingeflüstert, weil ich natürlich dein Maß nicht kenne. Setzt Du halt deins ein.

Den iframe setze ich auf 100%x100% - d.h. er soll den Rahmen komplett füllen.

Wie Du den Hintergrund beeinflusst - Look Here And Find Out.

Es gibt zwei Möglichkeiten: Entweder jede Eigenschaft einzeln setzen, oder alle zusammen.

Einzeln: Die URL gehört dann zu background-image, die Ausrichtung steuerst Du mit background-position und die Wiederholung mit background-repeat.

Zusammen: Du nimmst die Background-Eigenschaft und schreibst die Schlüsselwörter, die Du brauchst, hintereinander, in fast beliebiger Reihenfolge (siehe Link). Also zum Beispiel

   background: url(/myimages/kreisel.gif) center no-repeat;

für horizontal+vertikal zentriert. Oben Mitte würdest Du mit Hinzufügen von top hinter center erreichen (bei den Positionsangaben kommt erst die X-Angabe, dann die Y-Angabe).

Man sollte übrigens die Einzel-Eigenschaften und die background-Eigenschaft nicht gemischt verwenden, oder nur dann, wenn man mutmaßlich genau weiß, was man tut. Werte von Einzel-Eigenschaften, die bei der background-Eigenschaft nicht angegeben werden, ersetzt der Browser durch Defaultwerte, das kann zu verwirrendem Verhalten führen.

Rolf

[fl0rlAn]

@Rolf

super. Funktioniert nun, wie ich es mir vorgestellt habe. Danke für deine Hilfe!

Gruß Florian