Lazy load e ancore: come risolvere?

luX0r75

Ciao a tutti.
Negli articoli del mio blog utilizzo una TOC ancorata alle sezioni dell'articolo.
Mi sono accorto che se nell'articolo ci sono delle immagini in lazy load, la prima volta che uso le ancore queste non fanno spostare la pagina nella posizione esatta.

Questo è spiegabile con il funzionamento del lazy load stesso, perché non assegna l'altezza al container <img> se non quando con lo scrolling non si arriva all'immagine stessa, e quindi si sballa tutto il calcolo per arrivare alla sezione corretta.

Qualcuno di voi che si è imbattuto in questo problema ha trovato una soluzione “veloce”?

jabba

Ciao, secondo me dovresti risolvere dando comunque uno spazio pre-assegnato al container delle immagini (anche senza aver caricato l'immagine stessa). Una cosa del tipo:

article img[loading="lazy"] {
    min-height: 200px;
}

In questo modo l'immagine (o un container genitori se la preferisci sarà già dell'altezza giusta anche se l'immagine non è caricata, e questa si carica solo nel momento in cui entra nel viewport, ma in uno spazio già assegnato.
Ciao!

luX0r75

Ciao @jabba
avevo pensato a preimpostare l'altezza, ma credo che per gestirla per il responsive diventi un casotto...

jabba

Dovrei provare (non sono sicuro al 100%) ma se le tue foto sono tutte delle stesse dimensioni e dai un aspect ratio via CSS il browser dovrebbe riservare lo spazio in automatico (sapendo quant'è il 100% del contenitore e di conseguenza l'altezza, grazie alle proporzioni):

.contenitore-articolo img {
  width: 100%; 
  height: auto;
  aspect-ratio: 16 / 9; 
}

Però come detto funziona solo se tutte le immagini dell'articolo hanno quell'aspect-ratio...

jabba

Argomento interessante, ho chiesto a Claude e mi suggerisce questo:

<img src="foto.jpg" loading="lazy" width="1200" height="800" alt="...">

img {
    max-width: 100%;
    height: auto;
}

ma non ho idea del perchè... forse il browser riesce a prendere le dimensioni e le proporzioni dagli attributi e poi con i CSS riserva lo spazio però basandosi sul 100% del contenitore. Se fosse così sarebbe una mossa bella che intelligente da parte dei browser.
Da testare! Fammi sapere cosa scopri

luX0r75

Provo e ti faccio sapere

EDIT: Sembra non funzionare. Che poi io su mobile uso anche immagini che vanno in scorrimento orizzontale, senza ridimensionamento. Width 100% in questo caso fa poco.
Niente, situazione troppo complessa per una soluzione veloce.

Misà che il Lazy fa un bel volo fuori dalla finestra