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
Creare una cache temporanea in JavaScript
Cache temporanea in Javascript con oggetti
Abilitare .NET 10 su Azure App Service e Azure Functions
Definire il metodo di rilascio in .NET Aspire
Gestire il routing HTTP in Azure Container App
DevSecOps per .NET: dalla teoria alla pratica
Cambiamenti in OpenAPI per la documentazione di ASP.NET
Centralizzare gli endpoint AI Foundry con Azure API Management
Ottimizzare gli indici con Automatic Index Compaction in Azure SQL Database
Raggruppare risorse in .NET Aspire
Effettuare la ricerca di testo nascosto in una pagina web con Javascript
Interazione con ReconnectModal in Blazor


