Vorschau Bild laden, bis Orginal geladen ist

[Sammy]

Ich habe eine Seite dort werden sehr viele Bilder angezeigt. Sie haben alle die gleiche Grösse,
doch das Design passt sich am Brwoser an, so das ich die Breite bzw. vor allem die Höhe nicht vorraussagen kann.

Nun würde ich gerne bei jedem Bild einfach vorher einen Dummy laden, der ein zwei Byte hat so das die Seite sofort korrekt dargestellt wird, und die Bilder dann einzeln nachgeladen werden.

Bis jetzt habe ich nur Javascript Lösungen gefunden, ist das mit nur HTML, CSS nicht möglich?

Sammy

[Onkel Schnitzel]

Hallo,

Nun würde ich gerne bei jedem Bild einfach vorher einen Dummy laden, der ein zwei Byte hat so das die Seite sofort korrekt dargestellt wird, und die Bilder dann einzeln nachgeladen werden.

Bis jetzt habe ich nur Javascript Lösungen gefunden, ist das mit nur HTML, CSS nicht möglich?

pack doch dein <img> in ein weiteres Element (optimalerweise <figure>) und gib diesem ein background-image mit deinem default-Bild. Das sollte funktionieren.

Beste Grüße

Onkel Schnitzel

[Matthias Apsel]

Om nah hoo pez nyeetz, Sammy!

Ich habe eine Seite dort werden sehr viele Bilder angezeigt. Sie haben alle die gleiche Grösse, doch das Design passt sich am Brwoser an, so das ich die Breite bzw. vor allem die Höhe nicht vorraussagen kann.
Nun würde ich gerne bei jedem Bild einfach vorher einen Dummy laden, der ein zwei Byte hat so das die Seite sofort korrekt dargestellt wird, und die Bilder dann einzeln nachgeladen werden.

Das brauchst du nicht, die Attribute width und height für das img-Element erfüllen genau diesen Zweck und sind auch nicht als präsentationsbezogenes Markup zu sehen.

Matthias

[Onkel Schnitzel]

Das brauchst du nicht, die Attribute width und height für das img-Element erfüllen genau diesen Zweck und sind auch nicht als präsentationsbezogenes Markup zu sehen.

Ich hatte wohl überlesen, dass sein Problem eigentlich nur das "Springen" ist...

[Der Martin]

Hallo,

Nun würde ich gerne bei jedem Bild einfach vorher einen Dummy laden, der ein zwei Byte hat so das die Seite sofort korrekt dargestellt wird, und die Bilder dann einzeln nachgeladen werden.

das wäre kontraproduktiv - du würdest damit erreichen, dass das Laden der Seite insgesamt noch deutlich länger braucht, denn du verdoppelst[*] damit die Zahl der Requests. Und vermutlich macht nicht die tatsächlich übertragene Datenmenge pro Bild die Sache langsam, sondern die Anzahl der Requests, denn ...

dort werden sehr viele Bilder angezeigt.

Jeder einzelne Request bedeutet aber zum einen eine gewisse Totzeit, bis der Server darauf antwortet (das sind meist ein paar Zehntelsekunden), andererseits einige hundert Bytes Overhead durch die HTTP-Header.

Gib also besser die Größe der Bilder einfach als width- und height-Attribute an, wie Matthias schon empfiehlt.

[*] Apropos verdoppeln:

vorraussagen

Gab es 'r' im prreiswerrten Doppelpack?

Ciao,
 Martin

[Matthias Apsel]

Om nah hoo pez nyeetz, Der Martin!

das wäre kontraproduktiv - du würdest damit erreichen, dass das Laden der Seite insgesamt noch deutlich länger braucht, denn du verdoppelst[*] damit die Zahl der Requests.

Nur inkrementiert (um 1). Denn es wird genau ein CSS-Hintergrundbild zusätzlich angefordert, wenn ich das OP richtig lese.
Allerdings hat das Hintergrundbild ja sowieso keine Auswirkung auf die Abmessungen des Elements.

Plasma-Atheist

[misterunknown]

Moin,

Nur inkrementiert (um 1). Denn es wird genau ein CSS-Hintergrundbild zusätzlich angefordert, wenn ich das OP richtig lese.

Das ist der Fall, wenn die Galerie mit Javascript umgesetzt ist und/oder das Dummybild gecached wird (was es sollte).
Da der OP aber JS scheinbar nicht verwenden will, müsste das Bild gecached werden.

Grüße Marco

[Matthias Apsel]

Om nah hoo pez nyeetz, misterunknown!

Nur inkrementiert (um 1). Denn es wird genau ein CSS-Hintergrundbild zusätzlich angefordert, wenn ich das OP richtig lese.

Das ist der Fall, wenn die Galerie mit Javascript umgesetzt ist und/oder das Dummybild gecached wird (was es sollte).
Da der OP aber JS scheinbar nicht verwenden will, müsste das Bild gecached werden.

Einspruch. Identische CSS-Ressourcen werden ebenso wie identische Bilder nur ein einziges mal abgeholt.

Matthias

[Der Martin]

Hallo,

das wäre kontraproduktiv - du würdest damit erreichen, dass das Laden der Seite insgesamt noch deutlich länger braucht, denn du verdoppelst[*] damit die Zahl der Requests.
Nur inkrementiert (um 1). Denn es wird genau ein CSS-Hintergrundbild zusätzlich angefordert, wenn ich das OP richtig lese.

ach so ... ich war in Gedanken bei einem niedrig-aufgelösten Vorschaubild mit kurzer Ladezeit im Verhältnis zum Original. Aber du hast Recht, wenn's nur um ein Dummy zum Platzreservieren geht, brauche ich natürlich nur eins.
Oder eben gar keins.

Plasma-Atheist

Was hat das zu bedeuten? Darüber habe ich mich schon ein paarmal gewundert.
Du zweifelst an der Göttlichkeit der neuen Entwicklungen von KDE?
Oder du glaubst nicht an die Existenz von ionisiertem Gas?

Oder welche der anderen Bedeutungen von Plasma liegt deinem neuen Titel zugrunde?

So long,
 Martin

[Tabellenkalk]

Hallo,

Oder welche der anderen Bedeutungen von Plasma liegt deinem neuen Titel zugrunde?

guggstu sibiller.de

Gruß
Kalk

[Matthias Apsel]

Om nah hoo pez nyeetz, Tabellenkalk!

guggstu sibiller.de

Das ging aber schnell.

Matthias

[Der Martin]

Hallo,

Oder welche der anderen Bedeutungen von Plasma liegt deinem neuen Titel zugrunde?
guggstu sibiller.de

boah, darauf wäre ich so schnell nicht gekommen! Danke für den Wink mit dem Zaunpfahl.

Ankern mit Ulk

[Matthias Apsel]

Om nah hoo pez nyeetz, Der Martin!

Ankern mit Ulk

Kalk meint: Nur kulant imkern!

Matthias

[ralphi]

hi sammy,

früher, vor 15 Jahren hat man sowas mit gif gemacht ;-)
Da gibts ne option, bei der das gif erst unscharf läd und dann schärfer wird (nachläd)
ich weiß aber wirklich nicht mehr wie das prog (unter win3.1) hieß - konnte man auch gif-animationen machen.
Viele Grüße aus LA

[Matthias Apsel]

Om nah hoo pez nyeetz, ralphi!

Da gibts ne option, bei der das gif erst unscharf läd und dann schärfer wird (nachläd)

Nennt sich „interlacing“, gibts auch für png und lässt sich beispielsweise mit gimp realisieren.

Matthias

[Der Martin]

Hallo,

Da gibts ne option, bei der das gif erst unscharf läd und dann schärfer wird (nachläd)
Nennt sich „interlacing“, gibts auch für png und lässt sich beispielsweise mit gimp realisieren.

eine ähnliche Option gibt es bei JPEG, nennt sich dort "Progressive JPEG".

Ciao,
 Martin

[Linuchs]

früher, vor 15 Jahren hat man sowas mit gif gemacht ;-)
Da gibts ne option, bei der das gif erst unscharf läd und dann schärfer wird (nachläd)

Das geht immer noch. Bei der Erstellung einer gif-Grafik fragt GIMP nach interlace. Das bedeutet, dass beim Laden Pixelzeilen ausgelassen werden, die dann nach und nach ergänzt werden.

Die noch fehlenden Pixelzeilen werden vom Browser als Kopie der bereits empfangenen dargestellt, deshalb sieht das Bild zunächst unscharf aus und wird immer schärfer.

Die Technik ist mit schnelleren Internetverbindungen etwas aus der Mode gekommen.

Linuchs

[ralphi]

Das geht immer noch.

outen sich die Alten im Forum ;-)
gibts aber bestimmt auch moderne Lösungen für Sammy

Viele Grüße aus LA

[Linuchs]

outen sich die Alten im Forum ;-)

Ich kann sogar noch auf Papier schreiben und Kaffee ohne Maschine machen. Auch zu Fuss gehen. Kennt ja keiner mehr ;-)

Linuchs

[Der Martin]

Hallo,

outen sich die Alten im Forum ;-)
Ich kann sogar noch auf Papier schreiben

ich auch. Ich habe im Arbeitszimmer sogar etwa einen Quadratmeter Whiteboard an der Wand, das ich gern und oft für Skizzen und Entwürfe verwende.

und Kaffee ohne Maschine machen.

Von der Bohne bis zur Brühe? Nicht schlecht.

Auch zu Fuss gehen. Kennt ja keiner mehr ;-)

Looks like. Irgendwo habe ich kürzlich gelesen, der "Durchschnittsdeutsche" würde nur noch etwa 700m täglich zu Fuß gehen. Ich glaube, dann bin ich einer von denen, die den Schnitt nach oben ziehen. :-)

Ciao,
 Martin

[Gunnar Bittersmann]

@@Sammy:

nuqneH

Ich habe eine Seite dort werden sehr viele Bilder angezeigt. Sie haben alle die gleiche Grösse,
doch das Design passt sich am Brwoser an, so das ich die Breite bzw. vor allem die Höhe nicht vorraussagen kann.

Nun würde ich gerne bei jedem Bild einfach vorher einen Dummy laden, der ein zwei Byte hat so das die Seite sofort korrekt dargestellt wird, und die Bilder dann einzeln nachgeladen werden.

Wie ich das sehe, bist du dem Fehler aufgesessen, nicht dein Problem zu beschreiben, sondern das, was du als Lösung ansiehst. Und die bisher geantwortet haben, sind darauf hereingefallen.

Du möchtest kein „Vorschau Bild laden“ [sic! – auch ein Fehler]. Du möchtest verhindern, dass die Seiteninhalte beim Laden umherspringen, wenn die Bilder geladen werden, und deshalb den Platz für die Bilder von Beginn an freihalten.

Aus deiner Beschreibung entnehme ich, die Breitenangaben für die Bilder sind in % (vermutlich 100% der Breite B des Containerelements) und sie haben alle dasselbe Seitenverhältnis b/h.

Für die Höhe H des freizuhaltenden Bereichs gilt H/B = h/b. Sie ist also H = B × h/b.

Beispiel: Für ein Seitenverhältnis von 16/9 ergibt sich H = 100% × 9/16 = 56.25%. Die Höhe des freizuhaltenden Bereichs soll also 56.25% von dessen Breite betragen.

Bekommt man das nun mit CSS hin? Ja! Denn „percentages on ‘padding-top’ and ‘padding-bottom’ are relative to the width of the containing block, not the height“ [CSS3-BOX]

Und wie kriegt man das Bild in diesen Bereich? Mit absoluter Positionierung. Dazu ist das Containerelement relativ zu positionieren.

Qapla'