lozad.js
1.0.0
Chargeur paresseux hautement performant, léger et configurable en JS pur sans dépendances pour les images, les iframes et plus encore, en utilisant une API intersectionObserver
Et bien d'autres ...
Les bibliothèques de chargement paresseuses existantes se connectent à l'événement de défilement ou utilisent une minuterie périodique et appelez getBoundingClientRect() sur des éléments qui doivent être chargés paresseux. Cette approche, cependant, est douloureusement lente car chaque appel à getBoundingClientRect() oblige le navigateur à rediffuser la page entière et présentera Jank considérable à votre site Web.
Rendre cela plus efficace et performant est pour quoi IntersectionObserver est conçu, et il est atterri dans Chrome 51. IntersectionObservers vous faire savoir quand un élément observé entre ou sort de la fenêtre du navigateur.
# 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 lozadEnsuite, avec un bundler de module comme Rollup ou WebPack, utilisez comme vous le feriez autre chose:
// using ES6 modules
import lozad from 'lozad'
// using CommonJS modules
var lozad = require ( 'lozad' ) Ou charger via CDN et inclure dans la balise head de votre page.
< script type =" text/javascript " src =" https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js " > </ script > Lors du chargement à partir de CDN, vous pouvez trouver la bibliothèque sur window.lozad .
Dans HTML, ajoutez un identifiant à l'élément (le sélecteur par défaut identifié est la classe lozad ):
< img class =" lozad " data-src =" image.png " >Tout ce que vous avez à faire maintenant est d'instancier Lozad comme suit:
const observer = lozad ( ) ; // lazy loads elements with default selector as '.lozad'
observer . observe ( ) ; ou avec une référence Element DOM:
const el = document . querySelector ( 'img' ) ;
const observer = lozad ( el ) ; // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid
observer . observe ( ) ;ou avec des options personnalisées:
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 ( ) ;Référence:
ou si vous souhaitez donner une définition de fonction personnalisée pour charger l'élément:
lozad ( '.lozad' , {
load : function ( el ) {
console . log ( 'loading element' ) ;
// Custom implementation to load an element
// e.g. el.src = el.getAttribute('data-src');
}
} ) ; Si vous souhaitez prolonger l'état d'éléments loaded , vous pouvez ajouter l'option chargée:
Remarque : l'attribut
"data-loaded"="true"est utilisé par Lozad pour déterminer si un élément a été auparavant chargé.
lozad ( '.lozad' , {
loaded : function ( el ) {
// Custom implementation on a loaded element
el . classList . add ( 'loaded' ) ;
}
} ) ;Si vous souhaitez charger des éléments ajoutés dynamiquement:
const observer = lozad ( ) ;
observer . observe ( ) ;
// ... code to dynamically add elements
observer . observe ( ) ; // observes newly added elements as wellpour une utilisation avec des images réactives
<!-- responsive image example -->
< img class =" lozad " data-src =" image.png " data-srcset =" image.png 1000w, image-2x.png 2000w " >pour une utilisation avec des images d'arrière-plan
<!-- background image example -->
< div class =" lozad " data-background-image =" image.png " >
</ div >pour une utilisation avec plusieurs images d'arrière-plan
<!-- multiple background image example -->
< div class =" lozad " data-background-image =" path/to/first/image,path/to/second/image,path/to/third/image " >
</ div >pour une utilisation avec des images d'arrière-plan réactives (ensemble d'images)
<!-- responsive background image-set example -->
< div class =" lozad " data-background-image-set =" url('photo.jpg') 1x, url('[email protected]') 2x " >
</ div >Pour changer le délimiteur qui divise les images d'arrière-plan:
<!-- 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 >Si vous souhaitez charger les images avant d'apparaître:
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 ) ;Parfois, le chargement de l'image prend beaucoup de temps. Pour ce cas, vous pouvez ajouter un arrière-plan d'espace réservé:
< img class =" lozad " data-placeholder-background =" red " data-src =" image.png " >Lozad définit une couleur d'arrière-plan d'espace réservé de l'élément IMG et les utilisateurs verront le secours jusqu'à ce que l'image se charge.
Créez une structure d'élément d'image cassé .
IE Browser ne prend pas en charge la balise photo! Vous devez définir l'attribut
data-iesrc(uniquement pour vos balises d'image) avec Source for IE Browser
L'attribut
data-altpeut être ajouté à la balise d'image à utiliser dans l'attributaltdes images chargées de paresseux
<!-- 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 >Lorsque Lozad charge cet élément d'image, il le réparera.
Si vous souhaitez utiliser l'image d'image (comme l'image d'image de faible qualité), vous pouvez définir une balise img temporaire dans votre balise picture . Il sera supprimé lorsque Lozad chargera l'élément d'image.
< 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 > C'est tout, ajoutez simplement la classe lozad .
< div data-toggle-class =" active " class =" lozad " >
<!-- content -->
</ div > La classe active sera basculée sur l'élément lorsqu'il entre dans la fenêtre du navigateur.
Disponible dans les derniers navigateurs. Si la prise en charge du navigateur n'est pas disponible, utilisez le polyfill.
Pour le support IE11, veuillez utiliser ces polyfills.
Découvrez le wiki FAQ pour que certains gatchas communs soient conscients tout en utilisant lozad.js
Intéressé par la contribution des fonctionnalités et des correctifs?
En savoir plus sur la contribution.
Voir le Changelog
MIT © apoorv saxena
