Wie Platz reservieren für Bilder?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
alte bild
attribut
ausprobieren
berechnen
bild
code
dank
element
ermitteln
frage
funktionieren
hilfe
image
laden
platz
setzen
sorge
tag
url
verhindern
-
Hallo zusammen,
ich bin gerade dabei für meine Band eine Website zu erstellen (orange-session.lima-city.de). Das geht auch alles sehr gut voran, allerdings habe ich mit den tag/bild">Bildern ein paar kleine Probleme.
Über ein PHP Script lese ich die Namen aller Bilder aus /images ein und füge dann für jedes Bild einen Radiobutton und ein img tag ein. Das Ergebnis sieht ungefähr so aus:
<input type="radio" id="r0" name="images" onclick="changeimg(...)" /> <input type="radio" id="r1" name="images" onclick="changeimg(...)" /> <input type="radio" id="r2" name="images" onclick="changeimg(...)" /> ... <a href="....JPG" id="a0"><img src="..." alt="..." id="img0" /></a> <a href="....JPG" id="a1"><img src="..." alt="..." id="img1" /></a> <a href="....JPG" id="a2"><img src="..." alt="..." id="img2" /></a>
Mit Javascript sorge ich dann dafür, dass immer nur ein Bild angezeigt wird und man über zwei buttons vor und zurück schalten kann. Außerdem lade ich ein Bild erst, wenn es auch angezeigt wird. Sonst würden bei jedem Seitenaufruf 22 MB heruntergeladen werden...
Die Breite eines Bildes ist in CSS mit 100% angegeben, der absolute Wert kann also variieren.
Wenn ich nun vor und zurück schalte, verspringt immer die Seite, da das Bild zuerst geladen werden muss und es dadurch anfangs keine Höhe hat.
Meine Frage ist nun: wie kann ich dieses Verspringen der Seite verhindern?
Eine Möglichkeit wäre evtl. ein min-height zu setzen, so dass immer ein bestimmter Platz reserviert ist, aber dann ist unter kleineren Bildern immer sehr viel Platz frei, was auch nicht unbedingt gut aussieht.
Oder sollten wir einfach alle Bilder noch einmal in geringer Qualität abspeichern, sodass die von anfang an vorgeladen werden können, ohne das gleich ~20MB übertragen werden müssen? Das würde jedoch das Verspringen auch nicht verhindern, wenn die Bilder noch nicht fertig geladen sind (denke ich zumindest).
Ich würde mich über Hilfe freuen!
Beitrag zuletzt geändert: 26.5.2014 17:11:59 von orange-session -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du kannst doch über die attribute width und height im img-Tag die Größe des Bildes angeben.
Mit getimagesize kannst du in PHP die Breite und Höhe der einzelnen Bilder ermitteln. Stehen diese in den Attributen, wird sofort der benötigte Platz reserviert, bevor das Bild vollständig geladen wurde. -
Wie gesagt ist die Breite der Bilder auf 100% festgelegt, d.h. sie ist von Gerät zu Gerät unterschiedlich. Das trifft daher auch auf die Höhe zu. Ich könnte natürlich über PHP das Seitenverhältnis ausrechnen und dann über JS die Höhe berechnen und setzen. Das könnte funktionieren, vielleicht gibt es aber auch noch eine einfachere Lösung.
-
Erstens mal, die extrem grossen Bilder sind wortwörtlich scheisse.
Du hast da aber eh schon den richtigen Gedanken gehabt. Verkleiner die auf die Grösse, die sie nacher im Design auch haben. Nie grösser als sie sein müssen. Nacher kannst du immer noch auf das Original verlinken.
Ich hab das mal so gelöst:
<html> <head> <style> .container{ width: 550px; background: url('http://www.im-web-gefunden.de/wp-content/files/2007/01/ajax-loader.gif') no-repeat 50% 50%; } </style> <script> function bild(){ document.getElementById("img16").src="http://orange-session.lima-city.de/images/07_full.JPG"; } window.onload = function(){ document.getElementById('button').addEventListener("click", bild); } </script> </head> <body> <div class="container"> <img src="http://orange-session.lima-city.de/images/17_full.JPG" alt="images/17_full.JPG" id="img16" width="100%"> </div> <button id="button">Change</button> </body> </html>
Ich behalte immer das gleiche img Element, setze da die breite von 100% und ändre nur src mit JavaScript. Das laden geht ne Weile. Und während dem laden wird noch das alte Bild angezeigt, aber da kann man auch was machen.
Beitrag zuletzt geändert: 26.5.2014 18:20:16 von c143 -
Danke für die Antwort!
Das die Bilder etwas zu groß sind, hab ich mir auch schon gedacht, die Frage ist jedoch auch, wie groß müssen sie sein? Welche Bildschirmgrößen sind "standard" heutzutage?
Die Idee nur einen img-Tag zu nehmen ist auf jeden Fall gut, keine Ahnung warum ich da nicht selbst drauf gekommen bin.
Ich gehe mal davon aus, dass Browser heutzutage schlau genug sind, ein Image zu cachen sobald es einmal geladen wurde, sodass wenn man ein Bild ein zweites mal aufruft es aus dem Cache kommt? Wäre das nicht der Fall, wären mehrere img-Tags wohl doch praktischer.
Wie würdest Du das von dir angesprochene Problem lösen, dass das alte Bild angezeigt wird, während das neue geladen wird? Gibt es in JS ein event wenn das Laden beendet ist, sodass ich ein Platzhalter Element einblenden könnte? -
Ich will grad noch schnell was ausprobieren, ob das wirklich schlau ist, so wie ich es angestellt hab. Aber irgendwie ist dein Code extrem unübersichtlich.
Bei mir werden sie mit 550px angezeigt. Ich habe aber einen recht kleinen Bildschirm, aber mehr als 1000px wirst du nicht brauchen. -
Welchen Codeteil meinst Du? Das HTML ist nun mal mit PHP generiert, deswegen ist da nix eingeschoben.
Ich versuche absolute Angaben so gut wie möglich zu vermeiden, damit sich die Seite optimal an alle Geräte anpasst.
Wenn Du Fragen zum Code hast, frag einfach :) -
Ich weiss nicht, ob das eine schöne Lösung ist, aber funktionieren tut es:
<html> <head> <style> div.container{ width: 550px; background: transparent url('http://www.im-web-gefunden.de/wp-content/files/2007/01/ajax-loader.gif') no-repeat 50% 50%; } </style> <script type="text/javascript"> function image(url){ var newImage = new Image(); document.getElementById("img16").style.opacity = '0'; newImage.src = url; newImage.onload = function() { document.getElementById("img16").src=url; document.getElementById("img16").style.opacity = '1'; } } window.onload = function(){ document.getElementById('button').addEventListener("click", function(){ image('http://orange-session.lima-city.de/images/07_full.JPG'); }); } </script> </head> <body> <div class="container"> <img src="http://orange-session.lima-city.de/images/17_full.JPG" alt="images/17_full.JPG" id="img16" width="100%"> </div> <button id="button">Change</button> </body> </html>
Habe im Hintergrund eine Ladegrafik. Wenn das neue Bild lädt, blende ich es aus und sobald das neue da ist, wirds wieder eingeblendet. Aber wie gesagt, gibt da sicher bessere Lösungen.
Beitrag zuletzt geändert: 26.5.2014 18:51:29 von c143 -
Ah OK, die onload funktion wird erst aufgerufen, wenn das Bild fertig geladen ist.
Hab eben mal das so umgebaut, dass es nur einen img-Tag gibt und dass es eine 1000px Version der Bilder und eine mit der vollen Breite gibt. Werde nachher mal noch schauen, ob ich das mit der Ladegrafik hinbekomme.
Danke dir auf jeden Fall schon einmal für deine Hilfe!
Edit: Super, funktioniert wunderbar! Jetzt sollte ich mich irgendwann mal dran machen den Code aufzuräumen sowie den provisorischen Ladescreen mit einer besseren Version zu ersetzen.
Beitrag zuletzt geändert: 26.5.2014 22:31:46 von orange-session -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage