Flying Images è un plug-in di caricamento lento ad alte prestazioni.

Come funziona il caricamento lento?

Una normale immagine HTML è simile a questa:

<img src="sample.jpg" width="100%"/>

I plugin di caricamento lento riscrivono il codice in questo modo:

<img data-src="sample.jpg" width="100%"/>

Come hai notato,srcl'attributo è stato modificato inorigine-dati.

Perché nosrc, il browser inizialmente non carica questa immagine. Successivamente, un piccolo codice JavaScript controlla se l'immagine è nel viewport (il viewport dell'utente) e se è all'interno,origine-datiritorna a quellosrcquale browser attiva il download e la visualizzazione dell'immagine.

Che cos'è il caricamento lento nativo?

Chrome viene fornito con "caricamento lento nativo". Puoi leggerlo qui.

Il caricamento lento nativo ha il vantaggio che non è necessario JavaScript ed è generalmente molto più veloce poiché il browser lo fa "in modo nativo".

Il codice si presenta così:

<img src="sample.jpg" loading="lazy" width="100%"/>

Cosa sono le immagini volanti?

Flying Images è un plug-in di caricamento lento ad alte prestazioni. Utilizza il caricamento lento "nativo" del browser, se disponibile, altrimenti utilizza JavaScript normale per il caricamento lento.

Flying Images può anche caricare le immagini prima ancora che le immagini appaiano nel viewport.

Hai paura del caricamento lento perché danneggia l'esperienza dell'utente?

In che modo le immagini volanti sono diverse dagli altri plug-in di caricamento lento?

• Utilizza il caricamento lento integrato - usa il caricamento lento integrato se disponibile (attualmente supportato solo in Chrome), altrimenti usa JavaScript per caricare le immagini in modo lento.
• Carica le immagini prima di entrare nel viewport - mentre altri plugin caricano le immagini quando sono "dentro" il viewport, le immagini volanti le caricano quando stanno per entrare nel viewport.
• JavaScript minuscolo - solo 0,5 KB, compresso, ridotto.
• Se lo si desidera, è possibile utilizzare solo nativo – vuoi supportare solo Chrome? Puoi passare a "solo nativo", che non inserisce JavaScript.
• Riscrive tutto il codice HTML - non perdere mai un'immagine a causa del caricamento lento (anche se è stata aggiunta dai plugin della galleria).
• Stucco trasparente - a tutte le immagini viene aggiunta una minuscola base64 trasparente. Niente più sfarfallio durante il caricamento delle immagini.
• Escludi parole chiave - Quasi tutti i plug-in di caricamento lento forniscono una funzione di esclusione, tuttavia le immagini volanti possono anche escludere le immagini dal nodo padre dell'immagine. Utile se la tua immagine non ha un nome di classe.
• Supporta i browser con IE e JavaScript disabilitati - tutte le immagini vengono caricate istantaneamente se si tratta di Internet Explorer o anche se JavaScript è completamente disabilitato (utilizzandonoscriptetichetta).