Astuce img loading="lazy" supporté par Firefox !

[rick38]

Pour tous ceux qui se prenaient la tête avec le chargement lazy des images avec des scripts javascript, la dernière version du 8 avril de Firefox le prend en charge nativement ! <img loading="lazy"...

Et pour Chrome ce sera le 19 mai !

 

[colonies]

Pour tous ceux qui se prenaient la tête avec le chargement lazy des images avec des scripts javascript, la dernière version du 8 avril de Firefox le prend en charge nativement ! <img loading="lazy"...

Et pour Chrome ce sera le 19 mai !

C'est déjà actif dans Chrome depuis la version 76.
L'implémentation de Firefox a un bug si les images ont un srcset, si loading est placé avant (ou l'inverse, je ne sais plus).

Mais surtout : l'implémentation de Firefox est nulle. C'est le truc le plus basique qu'on puisse imaginer : le chargement démarre quand l'image arrive dans le viewport, donc toujours trop tard. Il ont réussi à ruiner une idée vraiment excellente telle qu'implémentée par Google, qui est complètement invisible pour l'utilisateur (mais qui charge bien plus en avance, évidemment).

Enfin ils ont surtout réussi à ruiner leur expérience utilisateur, en fait. Le problème, c'est que les utilisateurs vont peut-être croire que les sites buguent avec Firefox.
I's not a bug, it's a feature.

Franchement, si Firefox avait une grosse base d'utilisateurs, je virerais mes attributs loading=lazy tant je trouve leur implémentation mauvaise.

 

[anemone-clown]

Ca peut être intéressant pour les sites qui n'auraient pas encore implémentés de LazyLoading.

Je ne me suis pas encore penché sur la question, mais il pourrait utile de savoir tester si le navigateur accepte loading="lazy" ou non pour une alternative JavaScript. Il ne serait pas trop difficile pour les programmeurs d'activer (le charger) le script au cas où le navigateur n'est pas compatible. @spout

 

[spout]

@anemone-clown : https://web.dev/native-lazy-loading...rs-that-don't-yet-support-native-lazy-loading

 

[anemone-clown]

@spout : merci! Exactement ce que je cherchais, il ne reste plus qu'à l'adapter pour le data-scrset et quelques bricoles (personnelles sur aquaportail.com). Bon, maintenant, tant que le "loading" n'est pas pris en compte sur Mobile mais quasiment uniquement sur Desktop (cf. https://caniuse.com/#feat=loading-lazy-attr ), l'intérêt retombe beaucoup...

 

[colonies]

tant que le "loading" n'est pas pris en compte sur Mobile mais quasiment uniquement sur Desktop

Ça n’est pas le cas, cf... caniuse.

 

[anemone-clown]

@spout : je me demande s'il ne serait pas possible d'étendre le class MobileDetect en PHP pour gérer le "lazy" directement en PHP au lieu de javascript... ce serait intéressant (avec les infos de CanIUse.com).

 

[spout]

Quel intérêt vu que le fallback est qd même en JS ?

 

[theunholy]

mais qui charge bien plus en avance, évidemment

Beaucoup, beaucoup, beaucoup trop en avance à mon avis.

Ce serait bien que l'on puisse paramétrer cet aspect.

 

[indigene]

ça se fait en quelques lignes en javascript. C'est très léger. On peut paramétrer l'avance du chargement. Même moi j'y suis arrivé

 

[theunholy]

Oui mais un attribut html, c'est quand même mieux que du javascript. C'est frustrant que ça ne fonctionne pas tout à fait.