Lazy Load Intersection Observer

Utilisation de IntersectionObserver pour gérer le Lazy Load sur img picture iframe ou autres (à étendre si besoin).
Permet de charger les contenus dans le cas où le navigateur ne gère pas IntersectionObserver.
Ne pas oublier une petite balise noscript pour les navigateurs sans Javascript mais aussi pour le SEO.
Intersection Observer API sur MDN

Le script

Afficher / télécharger la source JS

La CSS

Afficher / télécharger la source CSS

Utilisation

Tout est dans le js... Exemple ici

Utilisation sur iframe Youtube
Utilisation sur une image
Dolor cras ornare
Utilisation sur picture
Sem sed sed risus sit
Utilisation en image de fond. Concernant le lazy load sur des images en background-image, il est nécessaire de disposer de plusieurs containers visibles selon le viewport.
Le rendu :
Le markup :
Exemple de CSS :
Utilisation des sources
Les sources de « Lazy Load Intersection Observer » proposées par sont mises à disposition selon les termes de la licence Creative Commons CC BY-NC-SA 4.0.
(licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions)
Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…
Un petit sou avec
Voir aussi…
  • Lazy Load Intersection Observer Lazy Load avec IntersectionObserver API pour images, picture, iframe, etc. Chargement lazy load de contenu, chargement différé de contenu de page web, script lazy loading
  • Vérifier un numéro de carte bancaire Vérification de carte bancaire, script de validation de carte bancaire. Contrôle de format de numéro de carte bancaire, algorithme de Luhn carte de crédit Visa, Mastercard, Maestro, CB, Carte Bancaire, Discover Card, American Express, JCB Cards
  • Owl Carousel multiple Gérer plusieurs carrousels/sliders sur une seule page avec Owl Carousel 2. Manage multiple carousels/sliders on one page with Owl Carousel 2
  • Conversion SVG/CSS Encodage SVG pour CSS compatible Sass, SVG encoder, base64 SVG pour CSS. SVG to base64, Convert SVG to Data URI for css
  • Optimisation SVG Intégration SVG via xlink/use/symbol, factorisation de symbol SVG, optimisation SVG web performance
  • SVG Responsive Utilisation des media queries internes à SVG
  • Design, flux et accessibilité jQuery Responsive layout logical DOM plugin
  • Lightbox Responsive et Accessible Lightbox images jQuery Responsive accessible a11y. Automatisation d'une Lightbox multipages. Lightbox image unique ou multiple. Lightbox responsive et accessible a11y wcag
  • Tooltip (infobulle) a11y Tooltip (infobulle) compatible a11y et SEO, naviguable au clavier, accessible par lecteur d'écran. Infobulle accessible, accessible tooltip
  • Script de contrôle de code postal Script de contrôle de codes postaux internationaux. Script zipcode, zipcode validator. Valider un code postal à la saisie, javascript contrôle de code postal
  • Widget calendrier PHP Construction d'un widget « calendrier » en PHP et asynchrone
  • Responsive background-image jQuery responsive background-image plugin, plugin jQuery responsive background images
  • Drapeaux ISO 3366 SVG Drapeaux nationaux vectoriels normés ISO alpha 2, alpha 3 et numérotation Organisation des Nations Unies (ONU). Drapeaux SVG pour internationalisation de sites multilingues.
  • Layout rigolo Une autre approche pour définir un layout de page responsive.
  • Serveur d'images placeholders Serveur d'images placeholder pour le développement front-end
  • Générateur de noms API de génération de couples prénom/nom aléatoires.
  • Générateur images TTF API de génération de textes en images.
2020-12-06