Ich erlebe dasselbe. Seltsamerweise funktioniert Lazy Loading wie erwartet, wenn ich mein Stylesheet vollständig entferne. Ich bin gespannt, ob Sie vielleicht das gleiche Verhalten sehen. BEARBEITEN: Es stellte sich heraus, dass meine Seite nicht lang genug war, um Bilder zu verschieben. Ich habe es auf dem Handy versucht, und es hat wie erwartet funktioniert.
– Jonathan Völker
1. Mai 2020 um 15:33 Uhr
Ich hatte ein ähnliches Problem, als ich versuchte, es zu implementieren.
Ich verwende Chrome standardmäßig und es hat nicht funktioniert. Als ich es in Firefox getestet habe, hat es funktioniert. Das ließ mich denken, dass es ein Browserproblem war.
Nachdem ich ein bisschen mehr gegraben hatte, fand ich das “Problem” für meinen Fall heraus. Wahrscheinlich geht es vielen anderen genauso.
Es stellt sich heraus Chrome ist ungeduldiger als Firefox beim Laden von als faul gekennzeichneten Bildern. Das bedeutet, dass die Bilder viel früher geladen werden, sodass ein Bild nicht geladen wird, wenn es auf dem Bildschirm erscheint, sondern früher. Firefox hingegen lädt die Bilder fast dann, wenn sie auf dem Bildschirm angezeigt werden sollen.
Die Bilder, die ich getestet habe, befanden sich unterhalb der Falte, aber die Seite war nicht sehr lang, also lud Chrome die Bilder trotzdem.
Als ich es in einem viel längeren Artikel ausprobierte, wurden die Bilder, die sich tief im Artikel befanden, auch in Chrome träge geladen.
Hoffe das hilft!
Aus meinen Experimenten geht hervor, dass 3200 Pixel ungefähr das sind, was Chrome für Lazy-Loading-Zwecke als “unter der Falte” betrachtet.
Ich habe es getestet und diese Antwort ist wahr, das Bild weit unter dem Bildschirmansichtsfenster wird geladen, das Detail des Pixelschwellenwerts wird in diesem Link beschrieben: web.dev/browser-level-image-lazy-loading Chrome ändert auch den Schwellenwert in Abhängigkeit von der vom Verbindungsclient verwendeten Verbindung
Berücksichtigen Sie, dass ich die Abmessungen einfach zufällig festgelegt habe IMG Tag auf 200px. Hier finden Sie weitere Informationen dazu web.dev-Artikel
hoffe es hilft 👍
Ich habe den schlimmsten Grund, warum es nicht funktioniert hat – ich habe vergessen, das hinzuzufügen width Und height Attribute (sie wurden stattdessen als hinzugefügt styles in meinem defekten Code)
Dies kann ein Grund sein, da Chrome die genauen Abmessungen des Bildes kennen muss, um Sprünge beim Laden der Bilder zu vermeiden
– Andre Ramon
16. September 2020 um 22:52 Uhr
Evans Mboya
Optional, wenn Sie Ihre Bildgröße nicht ändern möchten, verwenden Sie dies
Ich habe mich beworben loading="lazy" zu allen meinen Bildern, eingeschlossen width="111px" height="111px" Attribute für meine <img> Tags und konvertierte sie sogar in das WebP-Format, um die Größe zu reduzieren, aber mein Firefox-Browser lädt immer noch alle Bilder von der gesamten Seite. Ich berühre oder scrolle nach der Aktualisierung nicht. Der Indikator Dev Tools sagt, dass es – faul-img.
ich benutze Nodejs, vue und Rückenwind.
Was könnte falsch sein?
Wenn Sie eine neue Frage haben, stellen Sie diese bitte, indem Sie auf die Schaltfläche „Frage stellen“ klicken. Fügen Sie einen Link zu dieser Frage hinzu, wenn dies hilfreich ist, um den Kontext bereitzustellen. – Aus Bewertung
– ahuemmer
26. Dezember 2022 um 20:00 Uhr
es ist keine neue Frage. Ich habe das gleiche Problem wie im ursprünglichen Beitrag. Ich sehe keinen Grund, nur dafür einen neuen Beitrag zu erstellen, da Thema und Problem identisch sind
– Nibelur
27. Dezember 2022 um 14:04 Uhr
Das ist mit diesem (automatisierten) Kommentar gemeint. Wenn Sie das gleiche Problem haben, wäre eine neue Frage nicht sinnvoll, wie Sie sagten. Wenn Ihr Problem etwas anders ist, könnte es hilfreich sein, eine neue Frage zu stellen und vielleicht auf diese zu verweisen. Entscheidend ist, dass die “Antwort”-Funktion nur für eindeutige Antworten auf die ursprüngliche Frage gedacht ist.
– ahuemmer
27. Dezember 2022 um 16:45 Uhr
Zied Hf
Es könnte daran liegen Zwischenspeicher.
Wenn Sie hier sehen faul-img auf der Registerkarte Netzwerk bedeutet das, dass alles in Ordnung ist.
Sie können in einem privaten Fenster testen, wenn Sie es nur überprüfen möchten.
Wenn Sie eine neue Frage haben, stellen Sie diese bitte, indem Sie auf die Schaltfläche „Frage stellen“ klicken. Fügen Sie einen Link zu dieser Frage hinzu, wenn dies hilfreich ist, um den Kontext bereitzustellen. – Aus Bewertung
– ahuemmer
26. Dezember 2022 um 20:00 Uhr
es ist keine neue Frage. Ich habe das gleiche Problem wie im ursprünglichen Beitrag. Ich sehe keinen Grund, nur dafür einen neuen Beitrag zu erstellen, da Thema und Problem identisch sind
– Nibelur
27. Dezember 2022 um 14:04 Uhr
Das ist mit diesem (automatisierten) Kommentar gemeint. Wenn Sie das gleiche Problem haben, wäre eine neue Frage nicht sinnvoll, wie Sie sagten. Wenn Ihr Problem etwas anders ist, könnte es hilfreich sein, eine neue Frage zu stellen und vielleicht auf diese zu verweisen. Entscheidend ist, dass die “Antwort”-Funktion nur für eindeutige Antworten auf die ursprüngliche Frage gedacht ist.
– ahuemmer
27. Dezember 2022 um 16:45 Uhr
Максим Агарев
Das Bild sollte im Stil “relativ” positioniert werden.
Bitte geben Sie in Ihrer Antwort weitere Details an. Wie es derzeit geschrieben ist, ist es schwer, Ihre Lösung zu verstehen.
– Gemeinschaft bot
2. September 2021 um 15:30 Uhr
14456900cookie-checkNatives Lazy-Loading (loading=lazy) funktioniert nicht, selbst wenn Flags aktiviert sindyes
Hast du das gelöst?
– Verschiedene Benutzer
1. Januar 2020 um 13:41 Uhr
Scheinbar nicht ..
– Andre Ramon
2. Januar 2020 um 12:49 Uhr
Ich erlebe das gleiche Problem.
– tylersDisplayName
27. Januar 2020 um 21:06 Uhr
Ich erlebe dasselbe. Seltsamerweise funktioniert Lazy Loading wie erwartet, wenn ich mein Stylesheet vollständig entferne. Ich bin gespannt, ob Sie vielleicht das gleiche Verhalten sehen. BEARBEITEN: Es stellte sich heraus, dass meine Seite nicht lang genug war, um Bilder zu verschieben. Ich habe es auf dem Handy versucht, und es hat wie erwartet funktioniert.
– Jonathan Völker
1. Mai 2020 um 15:33 Uhr