Προοδευτικά σας αφήνει Lazy Load Εικόνες με τη Βανίλια JS

Κάθε σύγχρονη ιστοσελίδα πρέπει να είναι γρήγορη. Αν και υπάρχουν πολλές τεχνικές και plugins για να αυξήσετε την ταχύτητα της σελίδας, ίσως να μην ξέρετε από πού να ξεκινήσετε.

Το προοδευτικό σενάριο είναι α μεγάλη πηγή για την αύξηση της ταχύτητας σελίδας. Λειτουργεί ως τελετουργικό γραφικό φόρτωμα φόρτωσης που φορτώνει προοδευτικά τις εικόνες καθώς ο χρήστης μετακινείται προς τα κάτω στη σελίδα.

Είναι ένα δωρεάν έργο ανοιχτού κώδικα ώστε να μπορείτε να το κατεβάσετε και να το εκτελέσετε σε οποιονδήποτε ιστότοπο. Πλέον τρέχει σε 100% βανίλια JS, ώστε να έχει μηδενικές εξαρτήσεις που μπορεί να σας ζυγίσουν.

Μπορείτε να ρίξετε μια ματιά στο live demo στην αρχική σελίδα Progressively.

Είναι λίγο διαφορετικό από άλλα σενάρια τεμπέλης φόρτωσης επειδή διατηρεί σταθερά μεγέθη εικόνας για ολόκληρη τη σελίδα. Αυτό εμποδίζει το ολοένα και τόσο ενοχλητικό άλμα σελίδας που βλέπετε όποτε οι εικόνες φορτώνονται γρήγορα στην προβολή και να αυξήσει το ύψος περιεχομένου.

Και οι αντικαταστάσεις εικόνας μοιάζουν πραγματικά με τις εικόνες που φορτώνετε. Φοβερός!

Αυτή η τακτοποιημένη τεχνική δίνει στους επισκέπτες την ευκαιρία να προεπισκόπηση των εικόνων που μοιάζουν πριν φορτωθούν. Είναι όλα διαχειρίζονται μέσω JavaScript που ελέγχει την τοποθεσία του χρήστη στη σελίδα και προ-φορτώνει τις εικόνες, όπως έρχονται σε προβολή.

Σταδιακά έχει ένα αρκετά εκτεταμένο API έτσι είναι μια εξαιρετική επιλογή για web developers. Η εγκατάσταση μπορεί να πάρει τεχνική, ώστε να βοηθάει αν γνωρίζετε το δρόμο σας γύρω από την βασική κωδικοποίηση των frontend.

Αλλά μπορείτε να μάθετε περισσότερα σχετικά με την κύρια σελίδα του GitHub που περιλαμβάνει την πλήρη τεκμηρίωση API, οδηγίες εγκατάστασης και δείγματα αποσπασμάτων κώδικα που μπορείτε να αντιγράψετε / επικολλήσετε για τα έργα σας.

Αν χρειάζεστε ένα αξιόπιστο σενάριο εικόνας με τεμπέληδες φόρμες χωρίς τις δυσάρεστες εξάρσεις, τότε δίνετε προοδευτικά μια βολή. Είναι εντελώς δωρεάν και προσφέρει πολλές προσαρμογές για προγραμματιστές.

Επίσης, ρίξτε μια ματιά στο Progressively GitHub για να μάθετε περισσότερα και να βρείτε το πηγαίο κώδικα που μπορείτε να κατεβάσετε.