heise.de - Grafik wird unvollständig angezeigt...

BrokenHeart

Auf der Startseite von https://www.heise.de/ wird das erste Aufmacher-Bild unvollständig angezeigt. Und zwar für Version 83.0 und 78.5.0esr ( in unterschiedlichen Profilen). In der aktuellen Nightly wird das Bild korrekt dargestellt. Auch unter Chrome gibt es keine Probleme mit dem Bild. Ein Neustart im abgesicherten Modus und auch das händische Löschen des gesamten Cache-Ordners ändert nichts an der fehlerhaften Darstellung. Allerdings wird direkt nach einem Neustart im abgesicherten Modus (also wieder im normalen Modus) das Bild einmal richtig dargestellt. Nach einem Neuladen der Seite ist das Bild wieder kaputt.

Ist das nur bei mir so oder hat jemand eine Idee, wo die Ursache liegen könnte...

Hier die Heise Startseite:

2002Andreas

Sieht hier so aus ohne uBlock Origin:

milupo

Das img-Tag hat das Attribut loading mit dem Wert lazy. Das sorgt dafür, dass Bilder erst im Nachgang geladen werden und nicht das Laden der Seite blockieren.

BrokenHeart

Zitat von 2002Andreas

Sieht hier so aus ohne uBlock Origin:

Komisch, bei mir kommt konsequent das kaputte Bild. Im abgesicherten Modus und nach dem Löschen des Cache hätte er es ja eigentlich richtig darstellen müssen.

Jetzt auch in der Nightly...

Zitat von milupo

Das img-Tag hat das Attribut loading mit dem Wert lazy. Das sorgt dafür, dass Bilder erst im Nachgang geladen werden und nicht das Laden der Seite blockieren.

Auch wenn ich auf "Grafik anzeigen" gehe, wird mir die kaputte Version ausgeliefert. Erst wenn ich dann "CTRL+F5" drücke bekomme ich die vollständige Version des Bildes angezeigt. Lade ich die Hauptseite von heise.de wieder und mache den gleichen Reload, ist sie wieder kaputt.

Sören Hentzschel

Hier kein Problem.

BrokenHeart

Zitat von Sören Hentzschel

Hier kein Problem.

Auch nach einem Reload 'Ctrl+F5'?

milupo

Also, bisher wurde bei mir im Nightly das Bild noch nicht vollständig geladen, weder mit F5 noch mit Strg+F5.

Zitat von BrokenHeart

Auch wenn ich auf "Grafik anzeigen" gehe, wird mir die kaputte Version ausgeliefert.

Nein, bei mir wird da das komplette Bild gezeigt.

BrokenHeart

Zitat von milupo

Also, bisher wurde bei mir im Nightly das Bild noch nicht vollständig geladen, weder mit F5 noch mit Strg+F5.

Habe ich dich richtig verstanden, dass du das Problem jetzt auch reproduzieren kannst?

milupo

Ja, von Anfang an. Ich vermute nur loading="lazy" als Ursache. Und, wenn ich mit Rechtsklick auf Grafik anzeigen gehe, wird das komplette Bild angezeigt. Aber nur damit hatte ich bisher Erfolg.

In Bezugnahme auf Beitrag #2 von Andreas: Ich habe Adblock Plus und selbst mit dessen Deaktivierung lädt die Grafik nicht vollständig. Man könnte ja denken, dass das Bild auf das Laden der Seitenelemente wartet, die geblockt werden und daher nicht geladen werden. Aber nach Deaktivierung von Adblock Plus werden sie angezeigt, das Bild lädt aber dennoch nicht komplett.

BrokenHeart

milupo :

Da bin ich etwas beruhigt, dass wenigstens noch einer auch dieses Problem hat...

Inwieweit Lazy-Loading etwas damit zu tun hat, kann ich nicht sagen. Da aber alle(?) anderen Bilder auf heise.de funktionieren und ich auch auf anderen Seiten keinerlei so hartnäckige Probleme habe, hängt es wohl irgendwie mit dem Kontext der Startseite von heise.de zusammen. Das Bild wird bei mir nämlich im eigentlichen Artikel bei allen FF-Versionen vollkommen korrekt dargestellt ( auch nach reload).

milupo

Lazy-Loading richtet sich nach dem Viewport, wenn ich die Seite in den mobilen Viewports (Extras --> Web-Entwickler --> Bildschirmgrößen testen) anzeigen lasse, wird das Bild immer vollständig gezeigt.

BrokenHeart

Danke für die Info!

Stimmt, wenn man z.B. die Device-Pixel-Ratio(DPR) dort ändert, wird das Bild richtig angezeigt.

Sören Hentzschel

Zitat von BrokenHeart

Auch nach einem Reload 'Ctrl+F5'?

Da ich diese Seite nie besuche, gab es hier nichts im Browser-Cache, aber ich habe es zur Sicherheit nochmal wiederholt (Cmd + F5 auf Mac-Geräten). Gleiches Ergebnis: keine Probleme.

Zitat von BrokenHeart

Stimmt, wenn man z.B. die Device-Pixel-Ratio(DPR) dort ändert, wird das Bild richtig angezeigt.

Auf was geändert? Ich nutze ein MacBook und MacBooks gibt es seit Jahren schon nur mit einer Device-Pixel-Ratio von 2. Bildschirme mit weniger betrachte ich als minderwertige Produkte, aber wenn ich über den RDM von Firefox eine DPR von 1 simuliere, dann gibt es hier ebenso keine Probleme.

.DeJaVu

Also irgendwas macht Firefox falsch, selbst ohne uBo und uMatrix bleibt nur genau dieses eine Bild nach ~30% stehen. Und auch der Seitenaufbau ist gegenüber Chromium 87 komplett anders - bei Firefox bleibt die Seite lange gräulich, dann kommt erst Inhalt - bei Chromium ist diese Phase kürzer und zeigt die weissen Inhaltsfelder und nach und nach Text und Bilder, und das mit uBo und uMatrix.

Selbst ein anti-lazy-script ändert nichts dran

https://gist.githubusercontent.com/ihsoy-s/414048…le_lazy_load.js

leicht abgewandelt

Code

// ==UserScript==
// @name       Disable_lazy_load
// @description  Remove lazy load
// @include    http://*/*
// @include    https://*/*
// @match      http://*/*
// @match      https://*/*
// @run-at     document-end
// @copyright  2012, Yoshi-S
// ==/UserScript==

( function(){

    // removeLazy
    //    elm: target element
    //    attr: attribute that contains real url of the image
    function removeLazy (elm, attr) {
        if( elm.getAttribute(attr) && elm.src != elm.getAttribute(attr) )
        {
            // copy real url
            //elm.src = elm.getAttribute(attr);
            // remove original attribute
            elm.removeAttribute(attr);

            // debug message
            console.debug("[Replace Lazy-load] Remove lazy-load:", elm);
        }
    }
    
    // replaceLazyload
    //    doc: target
    function replaceLazyload(doc) {
        var img = doc.images;
        var i;
        if ( img != undefined )
        {
            for (i = 0; i < img.length; i++) {
                // execute removeLazy function for each lazyload attributes
                removeLazy(img[i], "loading");
                //removeLazy(img[i], "data-lazy-src");
                //removeLazy(img[i], "data-original");
            }
        }
    }

    // event
    function getEvent(evt){
        var node = evt.target;
        console.debug("[Replace Lazy-load] Get event:", evt.detail);
        replaceLazyload(node);
    }

    // exec
    replaceLazyload(document);

    // exec if AutoPagerize was called
    document.body.addEventListener('AutoPagerize_DOMNodeInserted', getEvent, false);

} () );

Alles anzeigen

Lade ich das Bild aus dem Inspector, ist es auch nur unvollständig, reload zeigt es vollständig.

heise lädt die Bilder von heise.cloudimg.io

milupo

Zitat von BrokenHeart

Inwieweit Lazy-Loading etwas damit zu tun hat, kann ich nicht sagen. Da aber alle(?) anderen Bilder auf heise.de funktionieren und ich auch auf anderen Seiten keinerlei so hartnäckige Probleme habe, hängt es wohl irgendwie mit dem Kontext der Startseite von heise.de zusammen. Das Bild wird bei mir nämlich im eigentlichen Artikel bei allen FF-Versionen vollkommen korrekt dargestellt ( auch nach reload).

Ja, das Bild zu 16 Jahre „World of Warcraft“ hat ebenfalls loading="lazy" und lädt sofort komplett. Und ja, auch bei mir werden die Bilder in den Artikeln selbst vollständig geladen.

BrokenHeart

Zitat von Sören Hentzschel

Auf was geändert?

Bei DPR1 zeigt er das kaputte Bild.

Bei DPR2 und DPR3 wird das Bild richtig dargestellt.

AngelOfDarkness

Also bei mir mit Firefox für Android 83.1.0 und mit Fenix Nightly, beide mit uBlock Origin und aktuellen Standard-Listen, wird mir das korrekt Bild angezeigt, auch bei einen reload der Seite.

milupo

Es gibt noch eine Merkwürdigkeit: In den Seiteninformationen von Fx 83 wird das Bild nur halb dargestellt, in den Seiteninformationen des Nightlies komplett.

BrokenHeart

Jetzt, wo der Artikel etwas weiter unten steht, wird das Bild wieder fehlerfrei dargestellt. Falls man das Bild nicht ausgetauscht/verändert hat (was ich nicht annehme), hängt die fehlerhafte Darstellung also anscheinend mit der Position/Seitenverhältnis im Kontext der Startseite zusammen. Da man jetzt das Problem wohl nicht mehr nachvollziehen kann, werde ich den Thread mal auf 'erledigt' stellen.

Interessiert hätte mich der genaue Grund allerdings schon...

BrokenHeart

Aktuelle Ergänzung:

Jetzt ist aktuell wieder das gleiche Problem mit einer falsch angezeigten webp-Datei aufgetreten (https://www.heise.de/). Eine Größenänderung des Browserfensters und damit die Änderung der Größe des eingebetteten Bildes bewirkt ein Umschalten zwischen der korrekten und falschen Anzeige. Ich habe mal eine Animation dazu erstellt:

Die webp-Datei wird korrekt heruntergeladen, aber wie oben zu sehen, nicht immer korrekt dargestellt:

Das Problem tritt bei mir bei allen aktuellen Firefox-Versionen und auch im abgesicherten Modus auf.

Leider immer noch keine Erklärung zu diesem Phänomen...