Le Intersection Observer API sono nuove specifiche HTML5 che permettono di eseguire un callback quando un determinato oggetto nella pagina diventa visibile. Grazie a queste nuove API diventa molto più semplice implementare funzionalità come l'infinite scrolling, in quanto possiamo eseguire il caricamento di nuovi elementi appena la fine della griglia diventa visibile. Possiamo anche caricare le immagini di una pagina solamente nel momento in cu l'immagine viene entra effettivamente nel viewport del browser.
La classe JavaScript che fornisce l'accesso alle API è IntersectionObserver. Al costruttore della classe passiamo in input il callback da invocare e un oggetto che contiene le seguenti proprietà:
- root: specifica l'oggetto in base al quale calcolare la visibilità. Se non definito l'oggetto è il viewport di default;
- rootMargin: margine CSS del viewport;
- threshold: valore di visibilità dell'oggetto prima che il callback venga scatenato; il valore va da 0 (default) a 1.
Una volta istanziato l'oggetto IntersectionObserver, dobbiamo invocare il metodo observe passando in input l'oggetto alla visibilità del quale viene scatenato il callback. Il callback accetta in input un oggetto che contiene la lista di oggetti per cui scatenare il callback stesso e l'observer. Possiamo poi ciclare gli oggetti ede seguire il codice per ognuno di essi.
var options = { root: null, rootMargin: '0px', threshold: 1.0 } var callback = function(entries, observer) { entries.forEach(entry => { console.log(entry); }); }; var observer = new IntersectionObserver(callback, options); var target = document.querySelector('#obj'); observer.observe(target);
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Generare file PDF da Blazor WebAssembly con iText
Reactive form tipizzati con FormBuilder in Angular
Eseguire attività pianificate con Azure Container Jobs
Usare le collection expression per inizializzare una lista di oggetti in C#
Inizializzare i container in Azure Container Apps
Controllare gli accessi IP alle app con Azure Container Apps
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Generare file per il download da Blazor WebAssembly
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Evitare il flickering dei componenti nel prerender di Blazor 8
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
I più letti di oggi
- Impostare un elemento come ridimensionabile tramite CSS
- Proteggersi dagli attacchi di Open Redirect in ASP.NET Core MVC
- Personalizzare l'errore del rate limiting middleware in ASP.NET Core
- Accedere alla console di una Azure Container App
- Modificare i metadati nell'head dell'HTML di una Blazor Web App
- Gli oggetti CallOut di Expression Blend 4.0
- SQL Server 2005 December CTP
- Sfruttare le nuove tipologie di input di HTML5 con ASP.NET 4.0
- Upload da una pagina web con Dundas Upload