Hi. Habe mir das mal angesehen. Also wenn ich per Debugger das Laden der Bilder anhalte, dann sieht man einen größeren vorgeladenen Rahmen als letztendlich benötigt. Lasse ich ihn dann das Bild nachladen, dann wird der Rahmen kleiner. Daher der Effekt, dass er beim Anker auch viel weiter nach unten scrollt, als er sollte.
Folgender Code zur Analyse:
<div id="attachment_15919" style="width: 910px" class="wp-caption aligncenter fbx-instance">
<a href="https://one-million-places.com/wp-content/uploads/2016/12/reiseberichte/mittelamerika-karibik/grenada/danke-an-das-team-der-aidadiva.jpg" class="fbx-link"><img src="https://one-million-places.com/wp-content/uploads/2016/12/reiseberichte/mittelamerika-karibik/grenada/danke-an-das-team-der-aidadiva-900x600.jpg" alt="Danke an das Team der AIDAdiva" class="size-large wp-image-15919" style="display: inline;" data-lazy-loaded="true" width="900" height="600">
<noscript><img src="https://one-million-places.com/wp-content/uploads/2016/12/reiseberichte/mittelamerika-karibik/grenada/danke-an-das-team-der-aidadiva-900x600.jpg" alt="Danke an das Team der AIDAdiva" width="900" height="600" class="size-large wp-image-15919" /></noscript>
</a><p class="wp-caption-text">Danke an das Team der AIDAdiva</p>
</div>
Hier siehst du das der Rahmen z.B. auf 600px Höhe vorgeladen wird. Wenn ich aber das Bild laden lasse, dann wird es letztendlich in 830 x 553 geladen. Also letztendlich kleiner als der reservierte Raum ohne vorher im Sichtbereich gewesen zu sein.
Daher der Effekt: Du springst zu dem Anker und die Bilder werden nachgeladen und die Seitenhöhe verringert sich, weil die nachgeladenen Bilder kleiner als der eigentlich vorreservierte Raum sind.
Ansatz: Man müsste jetzt nachschauen, wo das lazy load den Wert für den VOR-reservierten Raum hernimmt, z.B. aus dem Bildnamen (?) https://one-million-places.com/wp-content/uploads/2016/12/reiseberichte/mittelamerika-karibik/grenada/danke-an-das-team-der-aidadiva-900×600.jpg
Das ist zwar nicht die Lösung, aber eventuell eine Hilfe, wo du ansetzen kannst.
Hallo,
erst mal vielen Dank, dass Du Dir die Mühe gemacht hast, Dir das mal anzuschauen. Ich finde das nicht selbstverständlich. Danke!!!
Ok, den Effekt den Du beschreibst verstehe ich.
Wo hast Du die 830×553 her? Wenn ich mir meinen Beitrag anschauen:
Tauchen Grenada
Dann steht da 900px × 600px (Skaliert zu 898px × 599px)
Maße siehst du zB unten rechts:
http://prnt.sc/e0wt7e
ok, jetzt sehe was Du meinst. Ich glaube, ich habe irgendwann mal die Standard-Bildgröße geändert, aber nicht sowas wie „Regenerate Thumbnail“ oder ähnliches durchgeführt.
Wenn Du mal aber mal hier schaust:
One Million Places
dann sollte die Boxgröße doch eigentlich mit den Bildangaben von 900×600 stimmen, oder?
Ich bekomme da 898×598.667 plus 2pixel Rand. TOC+ klappt trotzdem nicht.
Oder habe ich da was übersehen?
Viele Grüße
Michael
Ja, die Angabe ist 900×600. Aber auch auf der Seite sind die Bilder letztendlich kleiner dargestellt.
Schaue mal mit Firebug oder den Entwicklungsumgebungen deines Browsers nach.
Oder:
Mache mal einen Screenshot und lade ihn dir in ein Bildbearbeitungsprogramm und dann kannst du mit einem Lineal abmessen, welche Größe die Darstellung leztendlich hat.
Das kommt übrigens daher, weil dein Contentbereich keine 900px hat.
ok, dann liegt es aber auch an der Bildschirmauflösung. Der ist auf 74% eingestellt. Bei mir (Auflösung 1680×1050) ist der Contentbereich über 1100 Pixel groß 🙂
Daher werden bei mir die Bilder anscheinend aich in der richtigen Größe 900×600 dargestellt.
Das bei einer kleinen Auflösung TOC+ nicht funktioniert, verstehe ich dann.
Aber bei meiner Auflösung von 1680×1050 (wo die Boxgröße ja anscheinend richtig ist) müsste TOC+ dann doch eigentlich klappen, oder?
Ah Okay.
Gehe mal in FF auf Entwicklerwerkzeuge -> Debugger und dann ANHALTEN klicken (links das Pausezeichen) – dann werden die Bilder nicht geladen, wenn du runterscrollst. Dann siehst du das der Rahmen viel zu groß ist.
