Höhe beim Reload manchmal falsch berechnet

pixx · 15. November 2019

Hallo zusammen,

habe ein Problem mit einem kleinen Javascript-Programm, das auf einer Wordpress-Site laufen soll.

Es geht darum, dass beim Laden oder beim Resize einer Seite die Höhe eines bestimmten Bildes gemessen wird. Diese soll sich auf die Höhe eines Divs auswirken.

So weit funktioniert das auch alles gut. Beim Laden der Seite stimmt es meist (wir kommen noch dazu), beim Ändern der Fenstergröße wird der Wert korrekt angepasst.

onResize = function() {

var hoehe = jQuery(".wp-post-image").height();

console.log("Höhe", hoehe);

jQuery(".pic-wrap").css("height", hoehe);

}

jQuery(document).ready(onResize);

jQuery(window).bind('resize', onResize);

Mein Problem: Manchmal wird beim Laden ein falscher Wert für die Höhe des Bildes ermittelt. Entweder 89 oder 0. Sobald man dann die Fenstergröße ändert, passt es sofort wieder.

Woran liegt es, dass manchmal beim erstmaligen Laden oder Reload der Seite ein falscher Wert berechnet wird? Was kann ich tun, um das zu verhindern? Vielen Dank!

Gruß

Michael

Sempervivum · 15. November 2019

Du benutzt das document-ready-Event. Bei diesem Event kann es sein, dass die Bilder noch nicht geladen sind und die Abmessungen nicht richtig berechnet werden. Du musst statt dessen das load-Event benutzen, siehe hier:

https://api.jquery.com/load-event/

Und beachte dort den gelb hinterlegten Hinweis.

pixx · 15. November 2019

Sehr gute Info, jetzt ist es so umgesetzt:

onResize = function() {

var hoehe = jQuery(".wp-post-image").height();

console.log("Höhe", hoehe);

jQuery(".pic-wrap").css("height", hoehe);

}

jQuery(window).on('load', onResize);

jQuery(window).bind('resize', onResize);

Funktioniert jetzt. Noch ein wenig Zeit sparen, indem man nur die eine spezielle Grafik auf vollständiges Laden prüft, geht wohl nicht?

Danke, hast mir sehr geholfen

Edit: Gerade noch in gtmetrix.com getestet: Ein kleines Script wie dieses benötigt rund 500 ms, verzögert das Laden der Seite aber nicht, da es parallel zu anderen Aufgaben abgearbeitet wird.

Sempervivum · 15. November 2019

Zitat

Noch ein wenig Zeit sparen, indem man nur die eine spezielle Grafik auf vollständiges Laden prüft, geht wohl nicht?

Doch, auch die Grafik hat ein load-Event und Du kannst das on-load auch darauf anwenden.

pixx · 15. November 2019

Das geht dann aber wohl nur über konkrete URLs, wenn ich das richtig sehe. Über CSS-Klassen wie .wp-post-image lässt sich das nicht ansprechen?

Sempervivum · 15. November 2019

Ich weiß nicht genau, wie Du das meinst. Ein bestimmtes Bild kannst Du ohne weiteres ansprechen und einen Eventlistener registrieren, bei deinem Beispiel so:

Code

onResize = function() {
    var hoehe = jQuery(".wp-post-image").height();
    console.log("Höhe", hoehe);
    jQuery(".pic-wrap").css("height", hoehe);
}

jQuery(".wp-post-image").on('load', onResize);

jQuery(window).bind('resize', onResize);

pixx · 16. November 2019

Genau das hatte ich versucht. Es gibt aber beim Laden der Seite keinen Wert aus. Nur beim Verändern der Fenstergröße gibt es dann Werte. Beim Reload wieder kein Wert.

Sempervivum · 16. November 2019

Wenn das Bild im Cache ist, kann es sein, dass es schon geladen ist, wenn das Skript abläuft. Kann man abfangen, indem man den Ladezustand abfragt:

Code

        var theimg = jQuery(".wp-post-image");
        onResize = function () {
            var hoehe = theimg.height();
            jQuery(".pic-wrap").css("height", hoehe);
        }
        if (theimg.prop('complete')) {
            onResize();
        } else {
            theimg.on('load', onResize);
        }
        jQuery(window).bind('resize', onResize);

Alles anzeigen

pixx · 16. November 2019

Interessant, werde ich testen. Danke.

Höhe beim Reload manchmal falsch berechnet

Jetzt mitmachen!

Teilen