Carnet Wiki

Lazysizes

En cours de rédaction /traduction, convertion markdown/spip …

Sources et docs

A faire :

-  [ ] Inclure les addons lazysizes,config depuis un squelette/plugin
-  [ ] finir de traduire la doc
-  [ ] Chaines de langue, et docs/aide des addons

Changelogs

Suivi des révisions

Dépendances & surcharges

Lazysize necessite l’installation du plugin htmlpurifier, et surcharge la fonction safehtml du noyau de spip, afin de rendre utilisable / prévisualisable dans l’espace privé le balisage html5.

Le plugin surcharge des modèle documents du plugin medias, en y intégrant le markup html5 figure, ainsi que les fallback necessaires noscript.

Markup & exemples

Lazyloading sur des logos de documents

<BOUCLE_listDocs(DOCUMENTS){tout}{0,100}{extension==jpg|png|gif}>
<div class="media">
    Fichier source : #LOGO_DOCUMENT** <br>
    #SET{fichier,#LOGO_DOCUMENT|image_reduire{600}|extraire_attribut{src}}
	<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
			data-src="#GET{fichier}"
			class="lazyload" alt="[(#TITRE|attribut_html)]"
			itemprop="image" >
</div>
</BOUCLE_listDocs>

Lazyloading d’images de produits avec un fond de la couleur dominante du produit

<BOUCLE_productList(PRODUITS){id_rubrique ?}{id_mot ?}{titre_mot?}{par date}{inverse}>

<BOUCLE_thumbnail(DOCUMENTS){id_produit}{extension==jpg|png|gif}{mode=document}{0,1}{par rang_lien}>
[(#REM)<!-- Commencer par Stocker l'image du produit en SET pour pouvoir l'utiliser ensuite -->]
#SET{thumbnail, #FICHIER|image_reduire{600,0}|extraire_attribut{src}}
[(#REM)<!-- Récupérer la dominante de l'image en se basant sur le point de focus défini par l'utilisateur-trice grace a centre-image -->]
#SET{img_color, #GET{thumbnail}|image_recadre{150,150,'focus center'}|couleur_extraire}
[(#REM)<!-- Créer une image temporaire depuis un gif transparent et la remplire avec la couleur dominante précédente -->]
[(#SET{tmp,#CHEMIN{rien.gif}|image_aplatir{gif,#GET{img_color}}|image_reduire{5,5}|extraire_attribut{src}|supprimer_timestamp})]
[(#REM)<!-- Définir l'image d'attente et l'encoder en base64 -->]
[(#SET{placeholder,#CHEMIN{#GET{tmp}}|balise_img|embarque_src|extraire_attribut{src}})]
</BOUCLE_thumbnail>
    <div class="product-image">
        <a href="#URL_PRODUIT" title="[(#GET{link_title}|attribut_html)]">
            [<img src="#GET{placeholder}"
                    data-sizes="auto"
                    data-src="(#GET{thumbnail})"
                    class="lazyload"[ alt="(#TITRE|sinon{#GET{link_title}}|attribut_html|couper{80})"]  itemprop="image" />]
            [<noscript>
                <img src="(#GET{thumbnail})"[ alt="(#TITRE|sinon{#GET{link_title}}|attribut_html|couper{80})"]  itemprop="image" />
            </noscript>]
        </a>
    </div>
</BOUCLE_productList>

Documentation

Intégration pour spip de la librairie javascript lazysizes un script de lazyloading rapide et sans dépendance a un framework.

Permet de déférer le téléchargement de ressources (images, iframes, vidéos, ..) de manière a ce que l’utilisateur
ne charge que ce qui est visible dans la fenêtre de navigation, ou quand on souhaite sur un autre évenement via un sytème de hooks/evenements.

Nativement et sans configuration Lazysizes prendra en charge :

  • les images incluant les images responsives picture/srcset rendant inutile l’utilisation d’un polyfill comme picturefill,
  • les iframes, les scripts/widgets, …

Il agit sur la priorité des pré-chargement en différenciant les éléments
suivant la distance plus ou moins importante du champ visible, afin d’augmenter l’impression de rapidité.

LazySizes peut aussi devenir votre outil numéro 1 pour intégrer à votre site les images responsive.

LazySizes peut calculer automatiquement la taille et le ratio de vos images.

Il peut vous permettre de partager vos media-queries entre vos css et les attributs de vos medias,
aidant ainsi à séparer votre layout (CSS) de votre contenu/structure (HTML),
rendant ainsi l’intégration des images responsive dans n’importe quel environnement ou contexte beaucoup plus simple.

Il inclu aussi un système de plugin, permettant d’étendre ses fonctionnalités.

Pourquoi LazySize

Lazysizes est conçut différement des autres scripts de lazyload d’image.

Il détecte automatiquement les changement de visibilité affectant l’élément courant a précharger
ainsi que les suivant, et ce dans n’importe quel environnement :

Le script fonctionne de manière autonome, auto initialisé, auto configuré,
de manière universelle, désactivant ou adaptant les composants future a précharger images ou iframes
en fonction de leur visibilité, que ce soit via un défilement utilisateur,
une animation css déclenchée par un changement d’état (:hover)
ou par un événement/action js (carousel, slider, masonry, isotope, filtrage, Ajax).

Il fonctionne aussi automatiquement en conjonction avec n’importe quel JS/CSS/front end framework
(jQuery mobile, Bootstrap, Backbone, Angular, React, Ember (voir si besoin l’extension attrchange/re-initialization )).

**À l’épreuve du futur** :

Inclue nativement le chargement différé sur les images responsives picture/srcset.

**Separation of concerns** :

For responsive image support it adds an automatic sizes calculation as also alias names for media queries feature.
There is also no JS change needed if you add a scrollable container with CSS (overflow : auto)
or create a mega menu containing images.

**Performance** :

It’s based on highly efficient, best practice code (runtime and network)
to work jank-free at 60fps and can be used with hundreds of images/iframes on CSS and JS-heavy pages or webapps.

**Extendable** :

It provides JS and CSS hooks to extend lazysizes with any kind of lazy loading, lazy instantiation,
in view callbacks or effects (see also the available plugins/snippets).

**Intelligent prefetch/Intelligent resource prioritization** :

lazysizes prefetches/preloads near the view assets to improve user experience,
but only while the browser network is idling (see also expand, expFactor and loadMode options).
This way in view elements are loaded faster and near of view images are preloaded lazily before they come into view.

**Lightweight, but mature solution** :

lazysizes has the right balance between a lightweight and a fast, reliable solution.

**Amélioration SEO** :

Lazysize ne masque pas les images/ressources à google ou aux autre robots des moteurs de recherche.
Ces robots ne défilent pas dans la page et n’interragissent pas avec votre site.
Lazysize detecte, si l’agent utilisateur (user agent) est capable de défiler
dans la page et révèle dans ce cas les contenus/ressources immédiatement.

Mist. GraphX - Mise à jour :21 décembre 2021 à 14h33min