Ou en est le Lazyload

Bonjour,
la fonction loading="lazy" implantée sur les navigateurs récents date maintenant de plus d'une année, je crois. J'ai commencé sur l'un de mes sites à l'utiliser en remplacement du JavaScript dédié à cette tâche. C'est un gros soulagement dans le code. Reste les anciens navigateurs ou ceux pas mis à jour. Qu'en est-il à ce jour ?
Côté négatif, avec cette commande intégrée aux navigateurs, l'impossibilité de régler le seuil d'apparition des images en dessous de la ligne de flottaison. Avec le JavaScript, c'était possible avec var config={rootMargin:'0px 0px 100px 0px',}
Si mes informations sont bonnes, le seuil a d'ailleurs été changé plusieurs fois sur cette fonction native. Preuve que ce n'est pas adapté totalement à tous les cas.
On peut, sur Firefox, aller changer ce seuil avec about:config, mais c'est chez soi, pas chez les visiteurs.
Sur caniuse = 95.77% de support.

Bonjour Bongota,

Loading/lazy je l'utilise depuis un moment déjà, aucun impact sur les anciens navigateurs, ceux-ci l'ignorent tout simplement.

On peut adopter plusieurs approches pour performer, ce que je fais : j'apose un lazyloading à toutes mes images, ensuite j'applique un script préchargeant les images après l'événement load ; donc, une fois la page chargée, le script se lance et toutes les images restantes, non visibles, sont chargées :

/**
 * Précharge les images ayant l'attribut loading="lazy"
 * en les téléchargeant après le chargement complet de la page.
 * Cela permet d'améliorer les performances lors d'une navigation ultérieure.
 * Notamment pour l'utilisation du cache avec un Service Worker.
 */
 function preloadImages() {
  const images = document.querySelectorAll('img[loading="lazy"]')

  images.forEach(img => {
    const preloadedImage = new Image()
    preloadedImage.src = img.src
  })
}

window.addEventListener('load', preloadImages)

Salut Olivier,
va pour le cache et la simplicité du JavaScript.
Ce que je ne comprends pas trop (hormis pour le cache), c'est l'utilité de charger toute la page. Alors que lazy loading est là justement pour charger les images seulement quand un visiteur descend sur la page.
As-tu testé le cas d'un visiteur qui va brusquement sur la fin d'une grande page d'un site "one page" en cliquant sur un lien interne ? J'ai par exemple un site one page en avec lay load. Il y a bien sûr tout en haut un menu avec des liens internes qui envoient le visiteur quelque part sur la page. Si l'un clique par exemple sur "infos", ce qui l'envoie au pied de page et au formulaire, que va-t-il se passer, avec ton script ?
Oui, les anciens navigateurs ignorent le lazy load, mais il y a précisément des polyfill pour ça.
Il y a aussi ça :
https://github.com/djforth/lazyload-polyfill
https://medium.com/ynap-tech/native-lazy-loading-and-js-based-fallback-with-vanilla-lazyload-12-c4273a56adbc

Bonjour,

Bongota a écrit :
Bonjour,
la fonction loading="lazy" implantée sur les navigateurs récents date maintenant de plus d'une année, je crois. J'ai commencé sur l'un de mes sites à l'utiliser en remplacement du JavaScript dédié à cette tâche. C'est un gros soulagement dans le code. Reste les anciens navigateurs ou ceux pas mis à jour. Qu'en est-il à ce jour ?

Fais comme eux, ils ignorent le loading="lazy", tu ignores en retour ces navigateurs.

Plaisanterie mise à part, comme ce n'est pas bloquant pour l'utilisateur, il n'est selon moi plus opportun, vu le pourcentage de support de la fonctionnalité, de continuer à combiner quoi que ce soit en js.

Amicalement,

Voilà des paroles rassurantes, les "anciens" navigateurs disparaissant de jour en jour.
Cependant, il reste un problème, le lazyload des images background distribuées en css. La fonction native lazyload des navigateurs ne permet pas d'agir sur ces images. Et je crois que ces images en css restent indispensables pour le parallax.
Pour les images background, on va donc continuer à utiliser JS et IntersectionObserver ? Le code JS est réduit si on ne vise que les images en background. Je l'avais utilisé à une époque, ça fonctionnait bien, mais j'ai supprimé toutes les images background de mes sites depuis.

Bonjour,

Bongota a écrit :
... mais j'ai supprimé toutes les images background de mes sites depuis.

Voilà ! Solution radicale ! Y a pas mieux !

Amicalement,