Caniuse lazyload

Bonjour,

le support pour le lazyload est donné par caniuse, mais parlent-ils du lazyload engagé avec JavaScript ou de celui natif sur certains navigateurs récents ? Je n'arrive pas à distinguer.
https://caniuse.com/?search=lazy%20loading
En un mot, n'est-il pas prudent de conserver encore l'API IntersectionObserver. Sachant que beaucoup de personnes utilisent encore des versions anciennes de navigateurs.
Enfin, en rapport avec ces questions, tout en introduisant la fonction loading="lazy" dans le html pour les versions récentes des navigateurs, j'ai conservé en parallèle l'API IntesectionObserver et le JavaScript qui permet le lazyload. Est-ce une mauvaise pratique ? Je ne note aucun problème pour le moment.

salut
je met loading="lazy" dans les balises img de la page html
pour toutes celles qui sont en dessous de la ligne de flottaison.
çà marche dans tous les navigateurs sauf ceux du siècle dernier.

et ceux qui n'ont pas fait de mises à jour matérielle (qui ont encore un ordi qui fonctionne au chharbon) ou logicielle depuis longtemps ont sûrement d'autres problèmes comme la sécurité par exemple.
Modifié par drphilgood (05 May 2024 - 17:20)

Bonsoir,

Moi je le mets partout. Couplé avec des attributs srcset on obtient de très bonnes perf's. Exemple avec cette page contenant des images en hautes résolutions (lance un test Lighthouse pour voir) : Image Gallery.

Pour la rétrocompatibilité à toi de voir, personnellement je ne m'embêterais pas trop.
Modifié par Olivier C (05 May 2024 - 20:38)

@Olivier
Moi aussi je le mets partout.
Mais j'ai un doute, un essais sur ton lien avec l'inspecteur de Firefox me montre que toutes tes images sont chargées d'un seul coup, bien sûr après avoir rechargé le réseau avec F5. Ou je me trompe ?



Si je fais la même chose sur l'un de mes sites, je n'ai bien que les images de la page courante qui sont affichées, c'est à dire les icônes diverses. Plus quelques unes de la pages suivante en-dessous de la ligne de flottaison, en prévision du scroll qui va venir. Mais pas tout le site.

@drphilgood
Ordinateur qui fonctionne au charbon Il faut s'être un peu promené dans les maisons des personnes (qui sont des dizaines de millions) qui ont peur de l'ordinateur. Afin de constater qu'énormément de monde utilise encore des navigateurs pas à jour. C'est regrettable, mais c'est un fait.
Bien sûr que le lazyload natif va petit à petit être implanté partout, c'est une grande facilité par rapport à l'utilisation de JavaScript. En attendant, il y a une chose que je n'aime pas, c'est l'impossibilité de fixer la ligne de flottaison sur le lazyload natif des navigateurs. Avec JavaScript et rootMargin, on peut. D'ailleurs, au cours du temps, les limites de cette ligne de flottaison ont changé. Ils se sont aperçus que ce n'était pas au point.

Olivier C a écrit :
Bonsoir,

Moi je le mets partout. Couplé avec des attributs srcset on obtient de très bonnes perf's. Exemple avec cette page contenant des images en hautes résolutions (lance un test Lighthouse pour voir) : Image Gallery.

Pour la rétrocompatibilité à toi de voir, personnellement je ne m'embêterais pas trop.

Mes excuses, je viens d'essayer avec Firefox 125, il y a bien le lazyload sur ton site. Je ne sais pas ce qu'il s'est passé avec le F12 d'un Firefox plus ancien.

"c'est l'impossibilité de fixer la ligne de flottaison sur le lazyload natif des navigateurs"

si j'enlève la lazy sur une image en dessous de la ligne de flottaison et que je passe ma page sur pagespeed insight, j'ai une remarque concernant cette image que le chargement devrait être différé, donc ladite ligne de flottaison est bien détectée et sans JS.

a écrit :
"donc ladite ligne de flottaison est bien détectée et sans JS"

Je n'ai jamais dit le contraire. J'ai dit "l’impossibilité de régler (fixer) cette hauteur". Sur le lazyload natif, cette hauteur est gelée dans le code. Comme je le disais plus haut, elle a d'ailleurs été rabaissée par les développeurs, et ne fait pas consensus pour le moment. Avec JavaScript, on peut précisément la fixer avec "rootMargin". Mais c'est un détail, le lazyload natif fonctionne bien.
Dans mon premier post, j'avais posé une question, j'ai finalement la réponse, trouvée sur le net. Utiliser le lazyload natif en plus un d'un script JS ne pose pas de problèmes particuliers. Tantôt c'est l'un ou l'autre qui va prendre la main. Pourquoi le faire, alors ?

Comme je le disais, à cause des très nombreuses personnes qui n'ont pas mis à jour leur navigateur depuis longtemps. Avec le temps, ce problème s'estompera, mais pour le moment, il faut encore y penser.
Le lazyload natif ne fonctionne pas sur les images background en css. C'est une lacune importante. Quand tu as un onepage avec chaque page comportant une grosse image en background, tu vas apprécier de la mettre en lazyload.
Il y a quelques retours de bug avec Safari 15.4 et même parfois avec Firefox sur le natif.
Enfin, un autre détail que j'ai remarqué. J'ai un slider. Quand je descend sur la page, la première image de ce slider se charge, seulement elle. C'est quand je déroule les autres images du slider qu'elles se chargent, les unes après les autres. Dans ce cas, le lazyload fonctionne horizontalement. Est-ce que le lazyload natif se comporte de cette façon ? Je n'ai pas testé.
Mon JavaScript pour le lazyload n'a que 20 lignes, ce n'est pas ça qui va retarder une page. J'ai un site où je n'ai mis que le JS, un autre le JS et le natif.

Pour conclure, j'ai trouvé ça dans Firefox avec about:config.

dom.iframe_lazy_loading.enabled	             true	
dom.image-lazy-loading.root-margin.bottom		      600.0	
dom.image-lazy-loading.root-margin.bottom.percentage	false	
dom.image-lazy-loading.root-margin.left			       600.0	
dom.image-lazy-loading.root-margin.left.percentage	false	
dom.image-lazy-loading.root-margin.right		        600.0	
dom.image-lazy-loading.root-margin.right.percentage	false	
dom.image-lazy-loading.root-margin.top			        600.0	
dom.image-lazy-loading.root-margin.top.percentage	false	
privacy.restrict3rdpartystorage.console.lazy                   true 

J'ignorais que l'on puisse modifier ça par ici. On retrouve tous les réglages root.margin du JS. Pour les téméraires
Modifié par Bongota (07 May 2024 - 17:57)