Nello script #449 abbiamo trattato la content-visibility e il suo ruolo nel non dipingere ciò che non è visibile nella viewport.
Se abbiamo però provato questa tecnica noteremo che il layout non è lineare: ci sono dei salti nel momento in cui il browser disegna l'elemento da inserire: la viewport non sa quanto spazio andranno ad occupare gli elementi, per questo motivo è altresì importante comunicare al browser quanto spazio il contenuto andrà ad occupare per riservare uno spazio vuoto, che verrà poi riempito, tramite contain-intrinsic-size
.lazy-load-section {
content-visibility: auto;
contain-intrinsic-size: 200px 500px;
}Se le dimensioni esatte non sono note, si può fare una stima o utilizzare JavaScript per calcolare una dimensione media e applicarla dinamicamente.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Esporre tool MCP con Azure Functions
Evidenziare una porzione di testo in un pagina dopo una navigazione
Utilizzare zizmor per rendere più sicuri i workflow di GitHub
Controllare la velocità di spostamento su una pagina HTML
Rendere affidabile lo scale out su Azure App Service
Ridimensionamento automatico input tramite CSS
Utilizzare le librerie native di .NET per decomprimere un file zip
Evitare la compressione degli artefatti in un workflow di GitHub
Logica Graceful Degradation in HTML e CSS
Integrare il Docker Model Runner in un workflow di GitHub
Gestione dei codeowners in GitHub
Creare una cache temporanea in JavaScript


