Το Flying Images είναι ένα πρόσθετο τεμπέλης φόρτωσης υψηλής απόδοσης.

Πώς λειτουργεί το lazy loading;

Μια κανονική εικόνα HTML μοιάζει με αυτό:

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

Τα πρόσθετα Lazy loading ξαναγράφουν τον κώδικα ως εξής:

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

Όπως προσέξατε,srcτο χαρακτηριστικό έχει αλλάξει σεdata-src.

Διότι όχιsrc, το πρόγραμμα περιήγησης δεν φορτώνει αρχικά αυτήν την εικόνα. Αργότερα, ένας μικρός κώδικας JavaScript ελέγχει εάν η εικόνα βρίσκεται στη θύρα προβολής (το παράθυρο προβολής του χρήστη) και εάν βρίσκεται μέσα,data-srcεπιστρέφει σε αυτόsrcποιο πρόγραμμα περιήγησης ενεργοποιεί τη λήψη και την εμφάνιση της εικόνας.

Τι είναι η εγγενής τεμπέλης φόρτωση;

Το Chrome συνοδεύεται από "εγγενή τεμπέλικη φόρτωση". Μπορείτε να διαβάσετε σχετικά εδώ.

Το Native Lazy loading έχει το πλεονέκτημα ότι δεν χρειάζεται JavaScript και είναι γενικά πολύ πιο γρήγορο αφού το πρόγραμμα περιήγησης το κάνει "natively".

Ο κώδικας μοιάζει με αυτό:

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

Τι είναι οι ιπτάμενες εικόνες;

Το Flying Images είναι ένα πρόσθετο τεμπέλης φόρτωσης υψηλής απόδοσης. Χρησιμοποιεί την "εγγενή" lazy φόρτωση του προγράμματος περιήγησης, εάν είναι διαθέσιμη, διαφορετικά χρησιμοποιήστε κανονική JavaScript για τεμπέλικη φόρτωση.

Το Flying Images μπορεί επίσης να φορτώσει εικόνες πριν ακόμη εμφανιστούν οι εικόνες στη θύρα προβολής.

Φοβάστε την τεμπέλικη φόρτωση επειδή βλάπτει την εμπειρία χρήστη;

Σε τι διαφέρουν οι ιπτάμενες εικόνες από άλλες πρόσθετες τεμπέλης φόρτωσης;

• Χρησιμοποιεί ενσωματωμένη lazy φόρτωση - χρησιμοποιήστε την ενσωματωμένη lazy loading, εάν είναι διαθέσιμη (προς το παρόν υποστηρίζεται μόνο στο Chrome), διαφορετικά χρησιμοποιήστε JavaScript για να φορτώσετε αργά τις εικόνες.
• Φόρτωση εικόνων πριν από την είσοδο στο παράθυρο προβολής - ενώ άλλα πρόσθετα φορτώνουν εικόνες όταν βρίσκονται "μέσα" στο παράθυρο προβολής, οι ιπτάμενες εικόνες τις φορτώνουν όταν πρόκειται να εισέλθουν στο παράθυρο προβολής.
• Μικροσκοπικό JavaScript - μόνο 0,5 KB, συμπιεσμένο, μειωμένο.
• Εάν θέλετε, μπορείτε να χρησιμοποιήσετε μόνο εγγενή – θέλετε να υποστηρίζετε μόνο το Chrome; Μπορείτε να μεταβείτε σε "μόνο εγγενές", το οποίο δεν εισάγει JavaScript.
• Ξαναγράφει όλο τον κώδικα HTML - μην χάσετε ποτέ μια εικόνα λόγω τεμπέλης φόρτωσης (ακόμα κι αν έχει προστεθεί από πρόσθετα γκαλερί).
• Διαφανές πληρωτικό - μια μικροσκοπική διαφανής βάση64 προστίθεται σε όλες τις εικόνες. Δεν υπάρχει πλέον τρεμόπαιγμα κατά τη φόρτωση εικόνων.
• Εξαίρεση λέξεων-κλειδιών - Σχεδόν όλα τα πρόσθετα lazy φόρτωσης παρέχουν μια δυνατότητα εξαίρεσης, ωστόσο οι ιπτάμενες εικόνες μπορούν επίσης να αποκλείσουν εικόνες από τον γονικό κόμβο εικόνας. Χρήσιμο εάν η εικόνα σας δεν έχει όνομα τάξης.
• Υποστηρίζει προγράμματα περιήγησης με IE και JavaScript απενεργοποιημένα - όλες οι εικόνες φορτώνονται αμέσως εάν είναι Internet Explorer ή ακόμα και αν η JavaScript είναι εντελώς απενεργοποιημένη (χρησιμοποιώνταςnoscriptετικέτα).