Φόρτωση… Κινούμενα σχέδια σε Vanilla JavaScript

Εισαγωγή

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

Σε αυτόν τον οδηγό, θα δούμε πώς να χρησιμοποιήσετε το Vanilla JavaScript για να δημιουργήσετε ένα κινούμενο σχέδιο φόρτωσης. Θα δουλέψουμε και με τα δύο κινούμενα σχέδια GIFs και φορτωτές που δημιουργήθηκαν από CSS και δείτε πώς να τις χρησιμοποιήσετε σε δύο σενάρια: φόρτωση περιεχομένου κατά την εκκίνηση εφαρμογής/ιστοτόπου ή αίτηση περιεχομένου από ένα εξωτερικό API.

Πώς να δημιουργήσετε έναν φορτωτή

Υπάρχουν διάφοροι τρόποι με τους οποίους οι άνθρωποι μπορεί να θέλουν να εμφανίσουν τον φορτωτή τους. Για τους σκοπούς αυτού του οδηγού, θα δημιουργήσουμε ένα πρόγραμμα φόρτωσης που θα καλύπτει ολόκληρη την οθόνη και στη συνέχεια θα εξαφανίζεται όταν ολοκληρωθεί η φόρτωση της σελίδας. Πρώτα απ 'όλα, πρέπει να δημιουργήσουμε μια σελίδα HTML κράτησης θέσης:

<div class="loader-container"> <div class="spinner"></div>
</div> <div class="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with Vanilla JavaScript. </p> <div class="buttons"> <button class="btn"><a href="#">Read Article</a></button> <button class="btn get-quote">Generate Quote</button> </div> <div class="quote-section"> <blockquote class="quote"> If you do not express your own original ideas, if you do not listen to your own being, you will have betrayed yourself. </blockquote> <span class="author">- Rollo May</span> </div>
</div>

Για λόγους απλότητας, έχουμε μόνο δύο <div> μπλοκ – ένα για το πρόγραμμα φόρτωσης και ένα για το περιεχόμενο του ιστότοπου.

Όπως αναφέρθηκε προηγουμένως, το εικονίδιο φόρτωσης μπορεί να είναι α GIF, ένα κινούμενο εικονίδιο που δημιουργήθηκε με CSS ή κάτι άλλο. Το σημαντικό πράγμα που πρέπει να θυμόμαστε είναι ότι η ίδια προσέγγιση ισχύει για κάθε τύπο εικονιδίου φόρτωσης που χρησιμοποιούμε.

Δημιουργία Loader με χρήση GIF

A GIF είναι ένα κινούμενο εικονίδιο που παίζει επ' αόριστον. Μια φορά δημιουργήσαμε το δικό μας GIF, θα διαμορφώσουμε το loader-container div που θα το στεγάσει. Υπάρχουν πολλοί τρόποι για να το στυλίσετε! Μπορείτε να γίνετε πραγματικά δημιουργικοί εδώ. Απλώς θα προσθέσουμε ένα στρώμα με μαύρο φόντο στο επάνω μέρος της σελίδας μας δίπλα στο εικονίδιο, για να «αποκλείσουμε» το περιεχόμενο φόρτωσης:

.loader-container { width: 100%; height: 100vh; position: fixed; background: #000 url("https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif") center no-repeat; z-index: 1;
}

Όταν φορτώσουμε την ιστοσελίδα μας τώρα, θα δούμε ένα μαύρο φόντο με ένα GIF φόρτωση στη μέση της οθόνης, παρόμοια με αυτό:

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

Δημιουργία Loader με χρήση CSS

Θα δημιουργήσουμε ακριβώς το ίδιο εικονίδιο με το CSS. Θυμηθείτε, δημιουργήσαμε ένα επιπλέον div (spinner) μεσα στην loader-container div και αυτό είναι που θα χρησιμοποιήσουμε για να αναπαραστήσουμε το εικονίδιο:

.spinner { width: 64px; height: 64px; border: 8px solid; border-color: #3d5af1 transparent #3d5af1 transparent; border-radius: 50%; animation: spin-anim 1.2s linear infinite;
} @keyframes spin-anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}

Ο παραπάνω κώδικας θα μας βοηθήσει να δημιουργήσουμε ένα εικονίδιο φόρτωσης CSS του οποίου μπορούμε τώρα να χρησιμοποιήσουμε το div loader-container για να κεντράρουμε και να προσθέσουμε το μαύρο φόντο όπως κάναμε προηγουμένως:

.loader-container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; position: fixed; background: #000; z-index: 1;
}

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

Πώς να εφαρμόσετε ένα κινούμενο σχέδιο φόρτωσης με JavaScript

Η JavaScript μας επιτρέπει να χειριστούμε τη δομή HTML μας και να αφαιρέσουμε ή να αποκρύψουμε την loader-container που εμφανίζεται αυτήν τη στιγμή μπροστά απο περιεχόμενο της ιστοσελίδας. Υπάρχουν δύο κύριες προσεγγίσεις για να το πετύχετε αυτό – απλώς να το κρύψετε loader-container, ή να το αφαιρέσετε εντελώς.

Όποια προσέγγιση κι αν επιλέξετε, το πρώτο βήμα είναι να χρησιμοποιήσετε το querySelector() or getElementById() για να ανακτήσετε το loader-container ώστε να μπορούμε να το χειριστούμε:

const loaderContainer = document.querySelector('.loader-container');

Δεύτερον, θα χρησιμοποιήσουμε το eventListener να ακούσω για α load συμβάν, έτσι ώστε να καλεί τη συνάρτηση επανάκλησης όταν το load συμβαίνει το συμβάν:

window.addEventListener('load', () => { // ...
});

Απόκρυψη του στοιχείου Φόρτωση…

Η πιο κοινή προσέγγιση είναι η απόκρυψη του loader-container με display: none έτσι ώστε να εξαφανίζεται όταν το περιεχόμενο φορτωθεί πλήρως.

Το HTML DOM μας επιτρέπει να αλλάξουμε το στυλ των στοιχείων HTML από JavaScript και ο παρακάτω κώδικας υποδεικνύει ότι ρυθμίζουμε το κοντέινερ του φορτωτή display ιδιοκτησία να none ώστε να μην εμφανιστεί μια φορά το load είναι επιτυχής:

window.addEventListener('load', () => { loaderContainer.style.display = 'none';
});

Εναλλακτικά, μπορείτε να δημιουργήσετε μια ξεχωριστή κλάση που ισχύει display: none ιδιοκτησία:

.loader-container-hidden { display: none;
}

Και στη συνέχεια χρησιμοποιήστε classList.add() για να προσθέσετε την τάξη στο loader-container στοιχείο:

window.addEventListener('load', () => { loaderContainer.classList.add('loader-container-hidden');
});

Αφαίρεση του στοιχείου Φόρτωση…

Μέχρι στιγμής, έχουμε δει μια σημαντική μέθοδο που μας επιτρέπει να κρύβουμε τα δικά μας loader-container, υπονοώντας ότι το στοιχείο είναι ακόμα παρόν, αλλά κρυμμένο. Μια άλλη επιλογή είναι να αφαιρέσετε εντελώς το στοιχείο:

window.addEventListener('load', () => { loaderContainer.parentElement.removeChild(loaderContainer);
});

Σε αυτό το σημείο, όταν φορτώνουμε τη σελίδα μας, θα εμφανίζεται το κινούμενο σχέδιο φόρτωσης μέχρι να φορτωθεί πλήρως το περιεχόμενο της σελίδας.

Εφαρμογή φόρτωσης κινούμενων εικόνων όταν ζητάτε εξωτερικό περιεχόμενο από ένα API

Η ανάκτηση περιεχομένου από ένα εξωτερικό API είναι μια άλλη κατάσταση που μπορεί να χρειαστεί τη συμπερίληψη ενός προγράμματος φόρτωσης. Αυτός ο τύπος περιεχομένου μπορεί να πάρει λίγο χρόνο για να ανακτηθεί και να εμφανιστεί, επομένως είναι καλύτερο να συμπεριλάβετε ένα πρόγραμμα φόρτωσης.

Στην περίπτωσή μας, ας προσπαθήσουμε να πάρουμε ένα απόσπασμα από το α αποσπάσματα API χρησιμοποιώντας το ενσωματωμένο Fetch API. Σημειώστε ότι το HTML που δημιουργήσαμε στην αρχή αυτού του άρθρου έχει α "Δημιουργία προσφοράς" κουμπί. Το μόνο που έχουμε να κάνουμε είναι να χρησιμοποιήσουμε το document.querxySelector() μέθοδος λήψης του στοιχείου και δημιουργίας συνάρτησης επανάκλησης για χειρισμό α click συμβάν που ενεργοποιείται όταν ο χρήστης κάνει κλικ στο κουμπί:

const getQuoteBtn = document.querySelector('.get-quote'); getQuoteBtn.addEventListener('click', () => { fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

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

const displayLoading = () => { loaderContainer.style.display = 'block';
}; const hideLoading = () => { loaderContainer.style.display = 'none';
};

Σε αυτό το σημείο, μπορούμε τελικά να ενσωματώσουμε το κινούμενο σχέδιο φόρτωσης στη συνάρτηση επανάκλησης. Όταν ξεκινήσει η ανάκτηση, η λειτουργία επανάκλησης θα εμφανίσει το κινούμενο σχέδιο φόρτωσης και θα το αποκρύψει μόλις ληφθούν τα δεδομένα:

getQuoteBtn.addEventListener('click', () => { displayLoading(); fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { hideLoading(); const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

Συμπέρασμα

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

• Coinsmart. Το καλύτερο ανταλλακτήριο Bitcoin και Crypto στην Ευρώπη.
• Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. ΕΛΕΥΘΕΡΗ ΠΡΟΣΒΑΣΗ.
• CryptoHawk. Ραντάρ Altcoin. Δωρεάν δοκιμή.
• Πηγή: https://stackabuse.com/loading-animation-in-vanilla-javascript/