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
Browser-based Web Apps with .NET and Blazor (.NET Conference Italia 2018)
Aggiungere e recuperare parametri custom in una route di Angular
Progressive Web Apps e il futuro delle app e del web
Effettuare ping e DNS lookup nelle Azure Web App
Mantenere l'aspect ratio durante il resize dei contenuti nella Universal Windows Platform
Utilizzare TransactionScope in Entity Framework Core 2.1
Autenticazione biometrica nella Universal Windows Platform
Alcune informazioni su .NET Conference 2018 e lo sciopero generale di venerdì 26 ottobre
Classificazione delle immagini con Azure Custom Vision
Usare IP Filtering per regolare l'accesso a una applicazione ASP.NET Core
Clonare un oggetto utilizzando il BinaryFormatter
Utilizzare il metodo JSON.parse per deserializzare le date di una stringa JSON in JavaScript
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: http://aspit.co/wkly buon week-end!
- Visual Studio 2019 sarà disponibile a partire dal 2 Aprile
- Creare un overload del metodo Sum di LINQ che somma i TimeSpan
- Migliorare le performance di ASP.NET Core 2.2 su IIS
- Chiamare direttamente un numero di telefono con HTML5