Ich versuche, mit lazyload nur Bilder zu laden, die sichtbar sind (weil meine Website reaktionsfähig ist und einige Inhalte mit display: none für Clients auf einem kleineren Bildschirm ausgeblendet sind).
Grundsätzlich funktioniert Lazyload, aber NUR, nachdem ich die Seite ein wenig gescrollt habe.
Dies sind die Lazy-Load-Einstellungen, die ich verwende, und selbst nachdem der Schwellenwert auf 2000px (mehr als die gesamte Seitenhöhe) eingestellt wurde, werden nur Bilder geladen, nachdem der Benutzer die Seite gescrollt hat (sogar 1 px). Dieser Fehler tritt nur in Webkit-Browsern auf.
%Vor% Ich denke, es könnte ein Fehlverhalten des threshold -Parameters sein, aber dennoch können Sie die Ladevorgänge manuell auslösen gemäß diese Seite :
Aber wenn Sie alle Bilder auf ready laden wollen, warum brauchen Sie überhaupt Lazyload? Sie könnten einfach $.animate verwenden.
Sie müssen Breite und Höhe für Ihre Bilder festlegen.
Wenn width und height nicht gesetzt sind, meldet jQuery Bilder, die in den Webkit-Browsern beim Ereignis document.load nicht sichtbar sind. Wenn skip_invisible ist true Lazy Load ignoriert die Bilder, dh es wird nicht versucht herauszufinden, ob das Bild geladen werden soll oder nicht. Sie laden das erste Mal, wenn Sie scrollen.
Wenn Sie skip_invisible setzen, wird false plugin versuchen herauszufinden, ob Bilder geladen werden sollen. Da Sie jedoch keine Breite und Höhe haben, werden alle Bilder die Größe 0x0 oder 1x1 haben. Aus diesem Grund sind alle Bilder im Ansichtsfenster (wegen ihrer Größe), wenn das Plugin startet. Da Bilder im Ansichtsfenster sind, wird Lazy Load anweisen, sie alle zu laden.
Kurz gesagt: Fügen Sie Bildern Breite und Höhe hinzu. Lazy Load funktioniert ohne sie nicht richtig.
Ich bin mir nicht sicher, wann das hinzugefügt wurde, aber Sie können das "Erscheinen" -Ereignis manuell auf einige oder alle (je nach CSS-Selektor) erscheinen lassen:
%Vor%Habe ich von hier: Ссылка
Ich hatte das gleiche Problem. Sie befinden sich in einem Scroll-Div, würden aber nur nach einem ersten Scroll geladen werden.
Wenn Sie "Erscheinen" verwenden, werden alle angezeigt, es sei denn, Sie beschränken es. In meinem Fall wollte ich nur die ersten 3 beim Laden zeigen. Der Rest von ihnen faul wie immer.
%Vor%Versuchen Sie, zusätzliche Parameter zu übergeben.
skip_invisible: falsch
Dieser Parameter ist standardmäßig wahr, daher scheinen Ihre Bilder nicht sichtbar zu sein, wenn das Plugin seinen Job startet. Dies kann passieren, wenn Sie einen Preloader auf Ihrer Website verwenden.
Ich hatte das gleiche Problem und habe eine Lösung dafür gefunden. Bitte beachten Sie, dass meine Bilder in einem div platziert wurden, das über einen Ajax-Anruf aufgefüllt wurde.
Ändern Sie einfach eine Codezeile innerhalb der Lazyload-Quellen (Zeilen 147-150) der Version 1.8.4:
%Vor%statt
%Vor%Oder fügen Sie den Aufruf von "update ()" eventuell einem anderen erforderlichen Ereignis hinzu.
Ich hatte ein ähnliches Problem, bei dem die Bilder nach einem Ajax-Aufruf nicht geladen wurden, bis ich scrollte (selbst wenn ich nur 1px scrollte, würde es laden). Ich fand, dass ich meinen Bildern eine Höhe und Breite hinzufügen musste, wie Mika Tuupola sagte. Meine Bilder wurden dynamisch geladen, hatten unterschiedliche Bildgrößen und wurden aus einer foreach-Schleife geladen. Ich fügte dem Image-Tag ein generisches width- und height-Attribut hinzu, und nachdem das lazyload das Bild geladen hat, habe ich die Attribute entfernt, sodass die korrekte Bildgröße angezeigt wird.
%Vor%Ich hatte das gleiche Problem mit versteckten Elementen, ist ein einfacher Workaround, aber es funktioniert. Wenn ich auf die Seite klicke, löst ich ein Scroll-Ereignis aus, um das Lazyload-Skript zu erzwingen. Sie können das Gleiche mit der Ereignis-Größenänderung tun
%Vor%Kurz gesagt: Fügen Sie Bildern Breite und Höhe hinzu. Lazy Load funktioniert ohne sie nicht richtig.
Sie sollten im Voraus Platzhalter geladen werden, so:
%Vor%Und dann
%Vor%Wenn Sie die Breite des Bildes auf 100% einstellen, erhalten Sie eine Breite und Höhe. Das hat mein Problem gelöst.
Erhöhen Sie failure_limit .
Nach dem Scrollen von Seitenplugin Loops obwohl entladene Bilder. Loop prüft, ob das Bild sichtbar ist. Standardmäßig wird die Schleife angehalten, wenn das erste Bild außerhalb des Ansichtsfensters gefunden wird. Dies basiert auf folgender Annahme. Die Reihenfolge der Bilder auf der Seite entspricht der Reihenfolge der Bilder im HTML-Code. Bei einigen Layouts kann dies falsch sein.
Wenn fail_limit auf 10 gesetzt wird, stoppt das Plugin die Suche nach Bildern, die geladen werden sollen, nachdem 10 Bilder unterhalb der Falte gefunden wurden.
Tags und Links javascript html jquery lazy-loading