vanilla lazyload
Version 19.1
LazyLoad est un script léger (2,4 Ko) et flexible qui accélère votre application Web en différant le chargement de vos images sous la ligne de flottaison, SVG animés, vidéos et iframes jusqu'au moment où ils entrent dans la fenêtre . Il est écrit en JavaScript simple "vanille", il exploite l'API IntersectionObserver, il prend en charge les images réactives, il optimise votre site Web pour des connexions plus lentes et peut permettre un chargement paresseux natif. Voir toutes les fonctionnalités pour en savoir plus.
➡️ Aller à : ? Démarrage - HTML - ? Démarrage - Script - ? Recettes - Démos - ? Trucs et astuces - ? API-? Toutes les fonctionnalités comparées
Vous aimez ce projet ? ? Offre-moi un café !
Afin que votre contenu soit chargé par LazyLoad, vous devez utiliser certains attributs data- au lieu des attributs réels. Exemples ci-dessous.
< img alt =" A lazy image " class =" lazy " data-src =" lazy.jpg " /> < img alt =" A lazy image " class =" lazy " src =" lazy-lowQuality.jpg " data-src =" lazy.jpg " />srcset et sizes : < img
alt =" A lazy image "
class =" lazy "
data-src =" lazy.jpg "
data-srcset =" lazy_400.jpg 400w,
lazy_800.jpg 800w "
data-sizes =" 100w "
/> Pour avoir un espace réservé de mauvaise qualité, ajoutez l'attribut src pointant vers une très petite version de l'image. Par exemple src="lazy_10.jpg" .
picture : < picture >
< source media =" (min-width: 1200px) " data-srcset =" lazy_1200.jpg 1x, lazy_2400.jpg 2x " />
< source media =" (min-width: 800px) " data-srcset =" lazy_800.jpg 1x, lazy_1600.jpg 2x " />
< img alt =" A lazy image " class =" lazy " data-src =" lazy.jpg " />
</ picture > Pour avoir un espace réservé de mauvaise qualité, ajoutez l'attribut src pointant vers une très petite version de l'image à la balise img . Par exemple src="lazy_10.jpg" .
picture : < picture >
< source
type =" image/webp "
data-srcset =" lazy_400.webp 400w,
lazy_800.webp 800w "
data-sizes =" 100w "
/>
< img
alt =" A lazy image "
class =" lazy "
data-src =" lazy.jpg "
data-srcset =" lazy_400.jpg 400w,
lazy_800.jpg 800w "
data-sizes =" 100w "
/>
</ picture > Pour avoir un espace réservé de mauvaise qualité, ajoutez l'attribut src pointant vers une très petite version de l'image à la balise img . Par exemple src="lazy_10.jpg" .
NOTE IMPORTANTE : Pour afficher des images de contenu sur vos pages, utilisez toujours la balise img . Cela bénéficierait au référencement et à l’accessibilité de votre site Web. Pour comprendre si vos images sont du contenu ou un arrière-plan, demandez-vous : « l'utilisateur de mon site Web aimerait-il voir ces images lors de l'impression de la page ? Si la réponse est « oui », alors vos images sont des images de contenu et vous devez éviter d'utiliser des images d'arrière-plan pour les afficher.
< div class =" lazy " data-bg =" lazy.jpg " > </ div > < div class =" lazy " data-bg =" lazy.jpg " data-bg-hidpi =" [email protected] " > </ div > < div
class =" lazy "
data-bg-multi =" url(lazy-head.jpg),
url(lazy-body.jpg),
linear-gradient(#fff, #ccc) "
>
...
</ div > < div
class =" lazy "
data-bg-multi =" url(lazy-head.jpg),
url(lazy-body.jpg),
linear-gradient(#fff, #ccc) "
data-bg-multi-hidpi =" url([email protected]),
url([email protected]),
linear-gradient(#fff, #ccc) "
>
...
</ div > image-set : < div class =" lazy " data-bg-set =" url('[email protected]') 1x, url('[email protected]') 2x " > ... </ div > image-set : < div
class =" lazy "
data-bg-set ="
url('[email protected]') 1x, url('[email protected]') 2x |
url('[email protected]') 1x, url('[email protected]') 2x
"
>
...
</ div > < object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object > < video class =" lazy " controls width =" 620 " data-src =" lazy.mp4 " data-poster =" lazy.jpg " >
< source type =" video/mp4 " data-src =" lazy.mp4 " />
< source type =" video/ogg " data-src =" lazy.ogg " />
< source type =" video/avi " data-src =" lazy.avi " />
</ video >Veuillez noter que l'affiche vidéo peut également être chargée paresseusement.
< iframe class =" lazy " data-src =" lazyFrame.html " > </ iframe >Vous aimez ce projet ? ? Offre-moi un café !
La dernière version recommandée de LazyLoad est la 19.1.3 . Notez que si vous devez prendre en charge Internet Explorer 11, vous devez utiliser la version 17.9.0 ou inférieure.
Comprenez rapidement comment effectuer une mise à niveau à partir d'une version précédente en lisant le guide pratique de mise à niveau.
Le moyen le plus simple d'utiliser LazyLoad est d'inclure le script d'un CDN.
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js " > </ script >OU, si vous préférez l'importer en tant que module ES :
< script type =" module " >
import LazyLoad from "https://cdn.jsdelivr.net/npm/[email protected]/+esm" ;
</ script >Ensuite, dans votre code javascript :
var lazyLoadInstance = new LazyLoad ( {
// Your custom settings go here
} ) ; Pour être sûr que le DOM de votre contenu paresseux est prêt lorsque vous instanciez LazyLoad, placez la balise script juste avant la balise de fermeture </body> .
Si d'autres DOM arrivent plus tard, par exemple via un appel AJAX, vous devrez appeler lazyLoadInstance.update(); pour que LazyLoad vérifie à nouveau le DOM.
lazyLoadInstance . update ( ) ;async Si vous préférez, il est possible d'inclure le script de LazyLoad à l'aide d'un script async et de l'initialiser dès son chargement.
Pour ce faire, vous devez définir les options avant d'inclure le script . Vous pouvez passer :
{} un objet pour obtenir une seule instance de LazyLoad[{}, {}] un tableau d'objets pour obtenir plusieurs instances de LazyLoad, chacune avec des options différentes. < script >
// Set the options globally
// to make LazyLoad self-initialize
window . lazyLoadOptions = {
// Your custom settings go here
} ;
</ script >Incluez ensuite le script.
< script
async
src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js "
> </ script > Placez éventuellement la balise script juste avant la balise de fermeture </body> . Si vous ne pouvez pas faire cela, LazyLoad pourrait être exécuté avant que le navigateur n'ait chargé tout le DOM, et vous devrez appeler sa méthode update() pour lui faire vérifier à nouveau le DOM.
async + obtenir la référence de l'instance Comme ci-dessus, mais vous devez mettre le code addEventListener indiqué ci-dessous avant d'inclure le script async .
< script >
// Set the options globally
// to make LazyLoad self-initialize
window . lazyLoadOptions = {
// Your custom settings go here
} ;
// Listen to the initialization event
// and get the instance of LazyLoad
window . addEventListener (
"LazyLoad::Initialized" ,
function ( event ) {
window . lazyLoadInstance = event . detail . instance ;
} ,
false
) ;
</ script >Incluez ensuite le script.
< script
async
src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js "
> </ script >Vous pourrez maintenant appeler ses méthodes, comme :
lazyLoadInstance . update ( ) ;DEMO - SOURCE ← pour une seule instance de LazyLoad
DEMO - SOURCE ← pour plusieurs instances LazyLoad
Si vous préférez installer LazyLoad localement dans votre projet, vous pouvez !
npm install vanilla-lazyload
bower install vanilla-lazyload
Téléchargez l'une des dernières versions. Les fichiers dont vous avez besoin se trouvent dans le dossier dist . Si vous ne savez pas lequel choisir, utilisez lazyload.min.js ou renseignez-vous sur les bundles.
Si vous installez LazyLoad localement, vous pouvez l'importer en tant que module ES comme suit :
import LazyLoad from "vanilla-lazyload" ; Il est également possible (mais déconseillé) d'utiliser la syntaxe require commonJS.
Plus d'informations sur le regroupement de LazyLoad avec WebPack sont disponibles sur ce référentiel spécifique.
Jetez un œil à cet exemple d'utilisation de React avec LazyLoad sur Sandbox.
Cette implémentation prend les mêmes accessoires que vous transmettriez normalement à la balise img , mais elle restitue une image paresseuse. N'hésitez pas à le bifurquer et à l'améliorer !
Dans le dossier dist , vous trouverez différents bundles.
| Nom de fichier | Type de module | Avantages |
|---|---|---|
lazyload.min.js | UMD (Définition universelle du module) | Fonctionne à peu près partout, même dans des contextes common-js |
lazyload.iife.min.js | IIFE (expression de fonction immédiatement invoquée) | Fonctionne comme un <script src="..."> sur la page, ~ 0,5 Ko plus petit que la version UMD |
esm/lazyload.js | Module ES | Exporte LazyLoad afin que vous puissiez l'importer dans votre projet à la fois en utilisant <script type="module" src="..."> et un bundler comme WebPack ou Rollup |
Vous aimez ce projet ? ? Offre-moi un café !
Il s'agit de la section où vous pouvez trouver du code prêt à copier et coller pour votre commodité.
Cas d'utilisation : lorsque vos images chargées paresseusement affichent leur texte
altet l'icône de l'image vide avant le chargement.
CSS
img : not ([ src ]) : not ([ srcset ]) {
visibility : hidden;
}Juste ça, vraiment.
Cas d'utilisation : lorsque vous souhaitez éviter d'afficher des images inexistantes/cassées sur votre site Web.
Javascript
var myLazyLoad = new LazyLoad ( {
// Other options here...
callback_error : ( img ) => {
// Use the following line only if your images have the `srcset` attribute
img . setAttribute ( "srcset" , "[email protected] 1x, [email protected] 2x" ) ;
img . setAttribute ( "src" , "[email protected]" ) ;
}
} ) ;REMARQUE : si l'erreur a été générée par un réseau en panne (navigateur temporairement hors ligne), vanilla-lazyload tentera de charger à nouveau les images lorsque le réseau redeviendra disponible.
EXEMPLE – API
Cas d'utilisation : lorsque vous souhaitez charger paresseusement des images, mais que le nombre d'images change dans la zone de défilement change, peut-être parce qu'elles sont ajoutées de manière asynchrone.
Javascript
var myLazyLoad = new LazyLoad ( ) ;
// After your content has changed...
myLazyLoad . update ( ) ;DÉMO - SOURCE - API
Cas d'utilisation : vous souhaitez utiliser l'option
use_nativepour déléguer le chargement des images, iframes et vidéos au moteur du navigateur lorsqu'il est pris en charge, mais vous souhaitez également charger paresseusement les images d'arrière-plan.
HTML
< img class =" lazy " alt =" A lazy image " data-src =" lazy.jpg " />
< iframe class =" lazy " data-src =" lazyFrame.html " > </ iframe >
< video class =" lazy " controls data-src =" lazy.mp4 " data-poster =" lazy.jpg " > ... </ video >
< object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object >
< div class =" lazy " data-bg =" lazy.jpg " > </ div >Javascript
// Instance using native lazy loading
const lazyContent = new LazyLoad ( {
use_native : true // <-- there you go
} ) ;
// Instance without native lazy loading
const lazyBackground = new LazyLoad ( {
// DON'T PASS use_native: true HERE
} ) ;DÉMO - SOURCE - API
Cas d'utilisation : lorsque votre conteneur défilant n'est pas la fenêtre principale du navigateur, mais un conteneur défilant.
HTML
< div class =" scrollingPanel " >
<!-- Set of images -->
</ div >Javascript
var myLazyLoad = new LazyLoad ( {
container : document . querySelector ( ".scrollingPanel" )
} ) ;DÉMO - SOURCE - API
Si vous disposez de plusieurs panneaux défilants, vous pouvez utiliser le balisage et le code suivants.
HTML
< div id =" scrollingPanel1 " class =" scrollingPanel " >
<!-- Set of images -->
</ div >
< div id =" scrollingPanel2 " class =" scrollingPanel " >
<!-- Set of images -->
</ div >Javascript
var myLazyLoad1 = new LazyLoad ( {
container : document . getElementById ( "scrollingPanel1" )
} ) ;
var myLazyLoad2 = new LazyLoad ( {
container : document . getElementById ( "scrollingPanel2" )
} ) ;DÉMO - SOURCE - API
Cas d'utilisation : lorsque vous souhaitez exécuter des scripts ou des fonctions arbitraires lorsque des éléments donnés entrent dans la fenêtre
HTML
< div class =" lazy " data-lazy-function =" foo " > ... </ div >
< div class =" lazy " data-lazy-function =" bar " > ... </ div >
< div class =" lazy " data-lazy-function =" buzz " > ... </ div >
< div class =" lazy " data-lazy-function =" booya " > ... </ div >JS
// It's a best practice to scope the function names inside a namespace like `lazyFunctions`.
window . lazyFunctions = {
foo : function ( element ) {
element . style . color = "red" ;
console . log ( "foo" ) ;
} ,
bar : function ( element ) {
element . remove ( element ) ;
console . log ( "bar" ) ;
} ,
buzz : function ( element ) {
var span = document . createElement ( "span" ) ;
span . innerText = " - buzz!" ;
element . appendChild ( span ) ;
console . log ( "buzz" ) ;
} ,
booya : function ( element ) {
element . classList . add ( "boo" ) ;
console . log ( "booya" ) ;
}
} ; function executeLazyFunction ( element ) {
var lazyFunctionName = element . getAttribute ( "data-lazy-function" ) ;
var lazyFunction = window . lazyFunctions [ lazyFunctionName ] ;
if ( ! lazyFunction ) return ;
lazyFunction ( element ) ;
}
var ll = new LazyLoad ( {
unobserve_entered : true , // <- Avoid executing the function multiple times
callback_enter : executeLazyFunction // Assigning the function defined above
} ) ; Utilisez unobserve_entered pour éviter d'exécuter la fonction plusieurs fois.
C'est ça. Chaque fois qu'un élément avec l'attribut data-lazy-function entre dans la fenêtre, LazyLoad appelle la executeLazyScript , qui obtient le nom de la fonction à partir de l'attribut data-lazy-function lui-même et l'exécute.
DÉMO - SOURCE - API
Cas d'utilisation : lorsque vous avez beaucoup de conteneurs à défilement horizontal et que vous souhaitez instancier une instance LazyLoad sur eux, mais uniquement lorsqu'ils sont entrés dans la fenêtre.
HTML
< div class =" horizContainer " >
< img
src =""
alt =" Row 01, col 01 "
data-src =" https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_01&w=200&h=200 "
/>
< img
src =""
alt =" Row 01, col 02 "
data-src =" https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_02&w=200&h=200 "
/>
<!-- ... -->
</ div >
< div class =" horizContainer " >
< img
src =""
alt =" Row 02, col 01 "
data-src =" https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_01&w=200&h=200 "
/>
< img
src =""
alt =" Row 02, col 02 "
data-src =" https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_02&w=200&h=200 "
/>
<!-- ... -->
</ div >Javascript
var lazyLoadInstances = [ ] ;
var initOneLazyLoad = function ( horizContainerElement ) {
// When the .horizContainer element enters the viewport,
// instantiate a new LazyLoad on the horizContainerElement
var oneLL = new LazyLoad ( {
container : horizContainerElement
} ) ;
// Optionally push it in the lazyLoadInstances
// array to keep track of the instances
lazyLoadInstances . push ( oneLL ) ;
} ;
// The "lazyLazy" instance of lazyload is used to check
// when the .horizContainer divs enter the viewport
var lazyLazy = new LazyLoad ( {
elements_selector : ".horizContainer" ,
callback_enter : initOneLazyLoad ,
unobserve_entered : true // Stop observing .horizContainer(s) after they entered
} ) ; C'est ça. Chaque fois qu'un élément .horizContainer entre dans la fenêtre, LazyLoad appelle la fonction initOneLazyLoad , qui crée une nouvelle instance de LazyLoad sur l'élément .horizContainer .
DÉMO - SOURCE - API
Vous aimez ce projet ? ? Offre-moi un café !
Vous n'avez pas trouvé la recette qui correspond exactement à votre cas ? Nous avons des démos !
Le dossier demos contient plus de 30 cas d’utilisation de vanilla-lazyload. Vous y trouverez peut-être ce que vous cherchez.
| Taper | Titre | Code | Démo |
|---|---|---|---|
| Contenu | Images simples chargées paresseusement, n'utilisant aucun espace réservé | Code | En direct |
| Contenu | Images paresseuses qui utilisent un SVG en ligne comme espace réservé | Code | En direct |
| Contenu | Images paresseuses qui utilisent un fichier SVG externe comme espace réservé | Code | En direct |
| Contenu | Images réactives paresseuses avec srcset | Code | En direct |
| Contenu | Images réactives paresseuses avec la balise <picture> et l'attribut media (direction artistique) | Code | En direct |
| Contenu | Images réactives paresseuses avec srcset et sizes (en utilisant data-sizes ) | Code | En direct |
| Contenu | Images réactives paresseuses avec srcset et sizes (en utilisant sizes simples) | Code | En direct |
| Contenu | Vidéo paresseuse avec plusieurs balises <source> , différentes options de préchargement, AUCUNE lecture automatique | Code | En direct |
| Contenu | Vidéo paresseuse avec plusieurs balises <source> , différentes options de préchargement, AVEC lecture automatique | Code | En direct |
| Contenu | Chargement paresseux des images d'arrière-plan | Code | En direct |
| Contenu | Chargement paresseux de plusieurs images d'arrière-plan | Code | En direct |
| Contenu | Chargement paresseux des images d'arrière-plan avec image-set() | Code | En direct |
| Contenu | Chargement paresseux des iframes | Code | En direct |
| Contenu | Chargement paresseux de fichiers SVG et PDF animés | Code | En direct |
| Contenu | Images WebP paresseuses avec la balise <picture> et l'attribut type pour WebP | Code | En direct |
| Chargement | Chargement asynchrone de LazyLoad avec <script async> | Code | En direct |
| Chargement | Chargement asynchrone de plusieurs instances LazyLoad avec <script async> | Code | En direct |
| Erreur | Tester le comportement de chargement des erreurs lorsque restore_on_error est false | Code | En direct |
| Erreur | Tester le comportement de chargement des erreurs lorsque restore_on_error est true | Code | En direct |
| Technique | Fondu des images au fur et à mesure de leur chargement | Code | En direct |
| Technique | Chargement paresseux des images dans des curseurs horizontaux CSS uniquement (style Netflix) | Code | En direct |
| Technique | Créez paresseusement des instances Swiper et chargez paresseusement des images Swiper | Code | En direct |
| Technique | Exécuter paresseusement des fonctions lorsque des éléments spécifiques entrent dans la fenêtre | Code | En direct |
| Technique | Comment gérer l'impression d'une page avec des images paresseuses | Code | En direct |
| Technique | Un calque contextuel contenant des images paresseuses dans un conteneur défilant | Code | En direct |
| Paramètres | Plusieurs conteneurs à défilement | Code | En direct |
| Paramètres | Conteneur à défilement unique | Code | En direct |
| Méthodes | Comment restore() le DOM à son état d'origine et/ou destroy() LazyLoad | Code | En direct |
| Méthodes | Ajout de contenu dynamique, puis update() LazyLoad | Code | En direct |
| Méthodes | Ajout de contenu dynamique, puis update() LazyLoad passant un NodeSet d'éléments | Code | En direct |
| Méthodes | Charger des images ponctuelles à l'aide de la méthode load() | Code | En direct |
| Méthodes | Chargez toutes les images en même temps en utilisant loadAll() | Code | En direct |
| Test | Tester plusieurs seuils | Code | En direct |
| Test | Tester le comportement avec des images cachées | Code | En direct |
| Test | Performances des tests, chargement paresseux de centaines d'images | Code | En direct |
| Indigène | Testez le chargement paresseux natif des images SANS aucune ligne de javascript, pas même ce script | Code | En direct |
| Indigène | Testez le chargement paresseux natif des images de manière conditionnelle à l'aide de l'option use_native (voir API) | Code | En direct |
Vous aimez ce projet ? ? Offre-moi un café !
