Ancre pas précise

PS : certains navigateurs mobiles forcent peut être le lazy loading

Si ton menu utilise du javascript, tu peux recaler la div au bon endroit après scroll avec un

setTimeout(() => { location.hash = "#" + id; }, 1000);

Je ne sais pas si un loading="eager" suffirait (?).

Bien ta réponse, je n'avais jamais entendu parler de ce problème.
En effet, j'utilise le lazyload sur le site, c'est même l'un des éléments de ce site. Je me vois mal le supprimer. D'autant plus que le lazyload se conçoit très bien sur un site on page et que s'en passer, c'est alourdir considérablement le temps de chargement.
Merci pour l'info.

kerlutinoec a écrit :


Pas forcément si tu fais charger tes images par un script en defer.

Quant à ton lazy load par intersection observer je présume qu'il a un role visuel. Les images peuvent être donc chargées mais masquées et apparaitre au scroll par intersection observer.

Dans ton script chargé en defer, tu mets un truc dans ce genre :

function init() {
const heavyDefer = document.querySelectorAll("img");
for (var i=0; i<heavyDefer.length; i++) {
	if (heavyDefer[i].getAttribute('data-src')) {
		heavyDefer[i].setAttribute('src',heavyDefer[i].getAttribute('data-src'));
}}}
window.onload = init;

Modifié par kerlutinoec (07 Apr 2022 - 14:38)

Le rôle de mon layzyload est visuel mais surtout, il allège considérablement le poids de la page au chargement.
Les images ne sont pas chargées et masquées, elle ne sont pas chargées du tout, tant que l'on ne descend pas sur la page. Le lazy load ne charge que l'image ou les images qui sont au-dessus de la ligne de flottaison.
La limite du déclenchement est réglable par "rootMargin:'0px 0px 100px 0px" situé dans le JavaScript associé.
C'est là que l'on définit le seuil de chargement de l'image suivante. C'est un peu la décision du concepteur, en fonction de l'ergonomie du site. On s'arrange pour prendre un peu d'avance, de façon à ne pas avoir d'apparitions brusques d'images.
C'est un peu ce qui est reproché au lazyload natif des tous nouveaux navigateurs. Il semble que ce fameux seuil est fixé et pas réglable (à confirmer).
Je viens d'effectuer de nouveaux tests sur mobile. Quand on descend sur la page avec le menu mais vers l'ancre suivante, il n'y a pas de problème. C'est quand on saute une ou deux ancres que le décalage commence à apparaître.

Bongota a écrit :
Le rôle de mon layzyload est visuel mais surtout, il allège considérablement le poids de la page au chargement.
Les images ne sont pas chargées et masquées, elle ne sont pas chargées du tout, tant que l'on ne descend pas sur la page. Le lazy load ne charge que l'image ou les images qui sont au-dessus de la ligne de flottaison.
La limite du déclenchement est réglable par "rootMargin:'0px 0px 100px 0px" situé dans le JavaScript associé.
C'est là que l'on définit le seuil de chargement de l'image suivante. C'est un peu la décision du concepteur, en fonction de l'ergonomie du site. On s'arrange pour prendre un peu d'avance, de façon à ne pas avoir d'apparitions brusques d'images.
C'est un peu ce qui est reproché au lazyload natif des tous nouveaux navigateurs. Il semble que ce fameux seuil est fixé et pas réglable (à confirmer).
Je viens d'effectuer de nouveaux tests sur mobile. Quand on descend sur la page avec le menu mais vers l'ancre suivante, il n'y a pas de problème. C'est quand on saute une ou deux ancres que le décalage commence à apparaître.

En fait ça dépend si tu veux alléger (lazy loading) pour économiser de la data à ceux qui n'irait pas plus loin (auquel cas reste comme ça), ou si tu veux alléger pour que la page s'affiche plus vite. Ma proposition permet ce second cas : page affichée vite au premier chargement puis le script *en defer* charge les images manquantes pendant que le visiteur lit le début.

C'est une proposition qui se tient, je vais me pencher dessus.
Avec intersection observer, j'allège la page aussi bien pour ceux qui n'iront pas plus loin que pour ceux qui vont regarder tout le site, puisqu'on charge les images au fur et à mesure du scroll.
Il faut aussi ternir compte des visiteurs qui vont aller directement sur un endroit précis de la page, parce qu'ils ont trouvé le mot clé sur un moteur tde recherche. Là, le lazyload ne sert plus à rien, tout du moins pour ce point précis.
Je dois avouer que j'ai aussi sur le même site un JavaScript qui fait apparaître les div au scroll de la page. Ça fait beaucoup, mais le site est très véloce, malgré tout. Peut-être qu'il y a aussi un problème ici avec le menu.

Salut,

je reviens sur mon problème.
Je ne comprends pas pourquoi, comme tu le dis, le lazyload aurait de l'influence sur l'ancre et pourquoi les images qui se chargent au cours du scroll décaleraient le point d'arrivée de l'ancre. J'ai placé des images placeholder partout pour remplacer les vraies images, en attendant. Et ces images fictives possèdent les mêmes dimensions que celles qui vont être téléchargées. De ce fait, il n'y a pas de déplacement de contenu lorsque les images se mettent en place.
Et pourquoi l'effet indésirable ne se produit pas en mode desktop ?

Bongota a écrit :
Salut,

je reviens sur mon problème.
Je ne comprends pas pourquoi, comme tu le dis, le lazyload aurait de l'influence sur l'ancre et pourquoi les images qui se chargent au cours du scroll décaleraient le point d'arrivée de l'ancre. J'ai placé des images placeholder partout pour remplacer les vraies images, en attendant. Et ces images fictives possèdent les mêmes dimensions que celles qui vont être téléchargées. De ce fait, il n'y a pas de déplacement de contenu lorsque les images se mettent en place.
Et pourquoi l'effet indésirable ne se produit pas en mode desktop ?

Je pense (mais je peux me tromper) que ton navigateur mobile fait du lazy loading forcé (d'où la différence avec la version desktop). Et dans ce cas il le fait aussi sur les images 'placeholder'...
Si c'est la raison, tente peut être le loading="eager" ou le prefetch des images 'placeholder'.
C'est quoi ce navigateur mobile ? Un truc standard (chrome/firefox) ou un truc samsung ?
Modifié par kerlutinoec (08 Apr 2022 - 10:30)