Bilder nicht alle vor-Laden bis Anzeige
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
anweisung
ausgabe
bild
browser
datei
einnehmen
einrichten
einstellung
erachten
externen bilder
header
langsamen bild
layout
platz
platzhalter
springen
vermutung
warten
webseite
-
Hallo
Was (und Wo) muss ich in HTML einfügen, damit eine Internetseite
beim öffnen im Browser zuerst das Layout (HTML+CSS) lädt, und anzeigt,
bevor die einzelnen Bilder aus den <img/> TAGs) geladen werden müssen.
Denn manchmal, wenn die Bild-Datei (src vom img) nicht / sehr lagsam geladen wird,
dann dauert es solange, bis Bild(er) komplett geladen sind, und erst dann wird
die Internetseite im Browser angezeigt,
Ich habe gehört, man kann Webseiten so einrichten,
dass zuerst "nur" das HTML+CSS Layout geladen und gleich angezeigt wird,
und erst dann diese (z.T. externen) <img> Bilder geladen werden,
damit die Webseite nicht wegen einem "langsamen" Bild warten muss,
Ich hoffe das geht ohne JS, am besten einfach ein HEAD (Meta-)TAG
oder andere Kopf-Daten Definition in HTML oder was in .htaccess ?
Sind es irgendwelche speziellen Cache Einstellungen / Befehle ?
Also wie die Bilder einer Seite nicht alle vor-Laden bis zur Ausgabe,
sondern immer "sofort" Layout anzeigen und alle anderen <img> Bilder
erst nach erfolgter Layout-Ausgabe in Browser fertig laden (mit Platzhalter)
Danke für Euere Hilfe / Vorschläge
Gruß, Gabi
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Der Browser lädt alles von oben nach unten.
Nur es kann immer nur eine javascript Datei, eine CSS-Datei und ein Bild gleichzeitig geladen werden.
Hast du jetzt natürlich mehrere große CSS Dateien, dann dauert es halt und es kann dann passieren, dass das erste Bild dann schon fertig geladen ist. Hast du dazu noch viele Inline Style-Angaben dann hat der Browser natürlich richtig zutun, und benötigt dann auch noch für das rendern der Webseite Zeit.
Ohne einen Link zu deiner Seite sind das natürlich nur Vermutungen. Eine HTML Anweisung gibt es dafür meines Erachtens nicht. -
Ich habe gehört, man kann Webseiten so einrichten,
dass zuerst "nur" das HTML+CSS Layout geladen und gleich angezeigt wird,
und erst dann diese (z.T. externen) <img> Bilder geladen werden,
damit die Webseite nicht wegen einem "langsamen" Bild warten muss,
Dass das per HTML gesteuert werden kann wäre mir neu, allerdings bin ich mir ziemlich sicher, dass es in den jeweiligen Browser solche Einstellungen gibt.
Wenn es rein darum geht, dass das Layout nicht wie gewollt aussieht, wenn Bilder erst nachgeladen werden müssen, solltest du mal kontrollieren, ob für die <img /> Tags die attribute width und height gesetzt sind. Mit denen kann der Browser gleich die Boxen in der Richtigen Größe ausgeben (noch bevor die Bilder überhaupt erst geladen sind), sodass sich das Layout nicht verschiebt wenn Bilder nachgeladen werden.
Als Platzhalterbild könntest du hier per CSS ein background-image festlegen.
Wie all-in1 schon gesagt hat, ließe sich das Ganze besser beurteilen, wenn du ein konkretes Beispiel hierzu verlinken könntest.
LG
dgnw -
Ich persönlich würde das mit Javascript lösen, aber das willst du ja nicht, oder? Müsstest du dich dann hald entscheiden was dir wichtiger ist, kein JS oder, dass die Bilder erst nachgeladen werden.
-
Lösung 1: Der Platz an dem die Bilder plaziert sind wird ausgesparrt, bis der ganze Body geladen ist
Dann springen die Bilder auf und verdrängen die anderen Elemente sodass die Site wieder richtig aussieht.
setze alle deine <img>´s auf display:none;(CSS)
dann <body onload="showimages()">
Ja du siehst richtig um ein winziges script kommst du schwer rum.
Das script im Header:
<script language="javascript">
function showimages(){
var images = document.getElementsByTagName('img');
var counter = images.length;
var image;
for (counter;counter>=0;counter--){
image=images[counter];
image.style.display='block';
}
}
</script>
Lösung 2: Ist sehr ähnlich mit dem Unterschied, dass du die Bilder zwar erst siehst wenn der komplette Body geladen ist...der Platz, den sie einnehmen ist trotzdem schon ausgesparrt solange sie nicht sichtbar sind.
setze alle deine <img>´s auf opacity:0.0;(CSS)
dann <body onload="showimages()">
Das script im Header:
<script language="javascript">
function showimages(){
var images = document.getElementsByTagName('img');
var counter = images.length;
var image;
for (counter;counter>=0;counter--){
image=images[counter];
image.style.opacity='1.0';
}
}
</script>
Greetings -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
