Skip to main content

Lazyload

Description

Une fonction de lazyload pour les navigateurs qui ne le supportent pas nativement. Un fichier Scss contenant deux classes utilitaires est aussi disponible.

Si vous utilisez Craft CMS et Imgix, vous pouvez utiliser mon outil Srcset generator pour Overdog.

Demo

N/A

Documentation

Example de HTML avec la classe utilitaire lazy-fit

Cela va agir comme background-image, mais avec la propriété object-fit. Vous devez ajouter une classe avec des dimensions sur le wrapper div.

<div class="lazy-fit votre-classe-de-style"
  <img 
    loading="lazy"
    decoding="async"
    data-srcset= Vos url de srcset
    sizes=
    data-src= Votre fallback pour vieux navigateur
    alt=
  />
</div>

Example de HTML avec la classe utilitaire lazy-img

Cela va utiliser les dimensions de l'image et la positionner pleine largeur dans votre wrapper div.

<div class="lazy-img votre-classe-de-style">
  <img 
    height="{{ photo.height }}" -> height de votre image
    width="{{ photo.width }}" -> width de votre image
    loading="lazy"
    decoding="async"
    data-srcset= Vos url de srcset
    sizes=
    data-src= Votre fallback pour vieux navigateur
    alt=
  />
</div>

Code

Dossier de base

Dossier complet