lozad.js
1.0.0
Hochleistungsfähiger, leichter und konfigurierbarer fauler Loader in reinen JS ohne Abhängigkeiten für Bilder, Iframes und mehr unter Verwendung von IntersectionObServer -API
Und noch viel mehr ...
Bestehende faule Ladebibliotheken verbinden sich mit dem Bildlaufereignis oder verwenden Sie einen periodischen Timer und rufen Sie getBoundingClientRect() auf Elemente an, die faul geladen werden müssen. Dieser Ansatz ist jedoch schmerzlich langsam, da jeder Aufruf an getBoundingClientRect() den Browser dazu zwingt, die gesamte Seite neu zu liefern, und wird Ihrer Website beträchtlich eingesetzt.
Es ist effizienter und leistungsfähiger, wofür IntersectionObServer ausgelegt ist, und es wird in Chrome 51 gelandet. IntersectionObservers informiert Sie, wenn ein beobachtetes Element das Ansichtsfenster des Browsers eingeht oder verlässt.
# You can install lozad with npm
$ npm install --save lozad
# Alternatively you can use Yarn
$ yarn add lozad
# Another option is to use Bower
$ bower install lozadVerwenden Sie dann mit einem Modul -Bundler wie Rollup oder Webpack wie Sie etwas anderes:
// using ES6 modules
import lozad from 'lozad'
// using CommonJS modules
var lozad = require ( 'lozad' ) Oder laden Sie über CDN und geben Sie in das head -Tag Ihrer Seite ein.
< script type =" text/javascript " src =" https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js " > </ script > Beim Laden von CDN finden Sie die Bibliothek auf window.lozad .
Fügen Sie in HTML dem Element eine Kennung hinzu (Standardauswahl ist lozad -Klasse):
< img class =" lozad " data-src =" image.png " >Alles, was Sie jetzt tun müssen, ist nur wie folgt Lozad zu instanziieren:
const observer = lozad ( ) ; // lazy loads elements with default selector as '.lozad'
observer . observe ( ) ; oder mit einer DOM Element :
const el = document . querySelector ( 'img' ) ;
const observer = lozad ( el ) ; // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid
observer . observe ( ) ;oder mit benutzerdefinierten Optionen:
const observer = lozad ( '.lozad' , {
rootMargin : '10px 0px' , // syntax similar to that of CSS Margin
threshold : 0.1 , // ratio of element convergence
enableAutoReload : true // it will reload the new image when validating attributes changes
} ) ;
observer . observe ( ) ;Referenz:
oder wenn Sie eine benutzerdefinierte Funktionsdefinition zum Laden von Elementen geben möchten:
lozad ( '.lozad' , {
load : function ( el ) {
console . log ( 'loading element' ) ;
// Custom implementation to load an element
// e.g. el.src = el.getAttribute('data-src');
}
} ) ; Wenn Sie den loaded Elementzustand erweitern möchten, können Sie die geladene Option hinzufügen:
HINWEIS : Das Attribut
"data-loaded"="true"wird von Lozad verwendet, um festzustellen, ob ein Element zuvor geladen wurde.
lozad ( '.lozad' , {
loaded : function ( el ) {
// Custom implementation on a loaded element
el . classList . add ( 'loaded' ) ;
}
} ) ;Wenn Sie faul laden möchten, sind dynamisch hinzugefügte Elemente hinzugefügt:
const observer = lozad ( ) ;
observer . observe ( ) ;
// ... code to dynamically add elements
observer . observe ( ) ; // observes newly added elements as wellZur Verwendung mit reaktionsschnellen Bildern
<!-- responsive image example -->
< img class =" lozad " data-src =" image.png " data-srcset =" image.png 1000w, image-2x.png 2000w " >Zur Verwendung mit Hintergrundbildern
<!-- background image example -->
< div class =" lozad " data-background-image =" image.png " >
</ div >Zur Verwendung mit mehreren Hintergrundbildern
<!-- multiple background image example -->
< div class =" lozad " data-background-image =" path/to/first/image,path/to/second/image,path/to/third/image " >
</ div >Zur Verwendung mit reaktionsschnellen Hintergrundbildern (Bildset)
<!-- responsive background image-set example -->
< div class =" lozad " data-background-image-set =" url('photo.jpg') 1x, url('[email protected]') 2x " >
</ div >Um den Trennzeichen zu ändern, der Hintergrundbilder aufteilt:
<!-- custom delimiter for background images example -->
< div
class =" lozad "
data-background-image =" /first/custom,image,path/image.png-/second/custom,image,path/image.png "
data-background-delimiter =" - "
>
</ div >Wenn Sie die Bilder laden möchten, bevor sie erscheinen:
const observer = lozad ( ) ;
observer . observe ( ) ;
const coolImage = document . querySelector ( '.image-to-load-first' ) ;
// ... trigger the load of a image before it appears on the viewport
observer . triggerLoad ( coolImage ) ;Manchmal dauert das Laden von Bild lange. Für diesen Fall können Sie einen Platzhalterhintergrund hinzufügen:
< img class =" lozad " data-placeholder-background =" red " data-src =" image.png " >Lozad legt eine Platzhalter -Hintergrundfarbe des IMG -Elements fest und Benutzer sehen den Fallback, bis das Bild lädt.
Erstellen Sie eine defekte Bildelementstruktur.
IE Browser unterstützt kein Bild -Tag! Sie müssen
data-iesrcAttribut (nur für Ihre Bild-Tags) mit Quelle für den IE-Browser festlegen
data-altAttribut kann zum Bild-Tag hinzugefügt werden, umaltAttribut von faul beladenen Bildern zu verwenden
<!-- For an element to be caught, add a block type that is different from the inline and some min-height for correct caught into view -->
< picture class =" lozad " style =" display: block; min-height: 1rem " data-iesrc =" images/thumbs/04.jpg " data-alt ="" >
< source srcset =" images/thumbs/04.jpg " media =" (min-width: 1280px) " >
< source srcset =" images/thumbs/05.jpg " media =" (min-width: 980px) " >
< source srcset =" images/thumbs/06.jpg " media =" (min-width: 320px) " >
<!-- NO img element -->
<!-- instead of img element, there will be the last source with the minimum dimensions -->
<!-- for disabled JS you can set <noscript><img src="images/thumbs/04.jpg" alt=""></noscript> -->
</ picture >Wenn Lozad dieses Bildelement lädt, wird es behoben.
Wenn Sie Image Placeholder (wie Bild -Platzhalter mit geringer Qualität) verwenden möchten, können Sie ein temporäres img -Tag in Ihr picture -Tag einstellen. Es wird entfernt, wenn Lozad das Bildelement lädt.
< picture class =" lozad " style =" display: block; min-height: 1rem " data-iesrc =" images/thumbs/04.jpg " data-alt ="" >
< source srcset =" images/thumbs/04.jpg " media =" (min-width: 1280px) " >
< source srcset =" images/thumbs/05.jpg " media =" (min-width: 980px) " >
< source srcset =" images/thumbs/06.jpg " media =" (min-width: 320px) " >
<!-- you can define a low quality image placeholder that will be removed when the picture is loaded -->
< img src =" data:image/jpeg;base64,/some_lqip_in_base_64== " >
</ picture > < video class =" lozad " data-poster =" images/backgrounds/video-poster.jpeg " >
< source data-src =" video/mov_bbb.mp4 " type =" video/mp4 " >
< source data-src =" video/mov_bbb.ogg " type =" video/ogg " >
</ video > < iframe data-src =" embed.html " class =" lozad " > </ iframe > Das ist alles, fügen Sie einfach die lozad -Klasse hinzu.
< div data-toggle-class =" active " class =" lozad " >
<!-- content -->
</ div > Die active Klasse wird auf das Element umgeschaltet, wenn es in das Ansichtsfenster des Browsers eintritt.
Erhältlich in den neuesten Browsern. Wenn die Browser -Unterstützung nicht verfügbar ist, verwenden Sie Polyfill.
Für IE11 -Unterstützung verwenden Sie bitte diese Polyfills.
Checkout the FAQ Wiki für einige gewöhnliche Gotchas, die man bei der Verwendung von lozad.js bewusst ist
Möchten Sie Funktionen und Korrekturen beitragen?
Lesen Sie mehr über den Beitrag.
Siehe den Changelog
MIT © apoorv Saxena
