טוען... אנימציה ב-Vanilla JavaScript PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.

טוען... אנימציה ב-Vanilla JavaScript

חותמת זמן: 14 ביוני 2022 6:30

מבוא

בעת פיתוח אתרים ויישומי אינטרנט, כולל אנימציית טעינה יכולה לשפר את חווית המשתמש באופן משמעותי על ידי תקשורת מה קורה. זה מעסיק את המשתמשים ושומר על תשומת הלב שלהם בזמן טעינת התוכן, וזה עוזר למשתמשים להבין מה קורה במקום להשאיר אותם מנחשים.

במדריך זה, נבחן כיצד להשתמש ב-Vanilla JavaScript כדי ליצור אנימציה לטעינה. נעבוד עם שניהם מונפשים תמונות GIF ומעמיסים שנוצרו ב-CSS וראה כיצד להשתמש בהם בשני תרחישים: טעינת תוכן בעת ​​השקת אפליקציה/אתר או בקשת תוכן מ-API חיצוני.

אנימציית ספינר לטעינת css ו-gif ב-Javascript וניל

כיצד ליצור מטעין

ישנן דרכים שונות שאנשים ירצו להציג את המטען שלהם. לצורך המדריך הזה, נבנה מטעין שיכסה את כל המסך ולאחר מכן ייעלם עם סיום טעינת העמוד. קודם כל, עלינו ליצור דף 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, או משהו אחר. הדבר שחשוב לזכור הוא שאותה גישה חלה על כל סוג של סמל טעינה שאנו משתמשים בו.

צור מטעין באמצעות 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 טעינה באמצע המסך, בדומה לזה:

טוען... אנימציה ב-Vanilla JavaScript PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.

בשלב זה, אנו מוכנים ליישם טעינה באמצעות JavaScript. אבל בואו נראה גם איך אנחנו יכולים להשתמש באנימציה שנוצרה ב-CSS במקום ב-a GIF, שאינו דורש קובץ נוסף כדי לייבא.

צור מטעין באמצעות 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 כדי לשלוט מתי הנפשה הטעינה הזו תופיע ותיעלם.

הערה: אתה יכול לבדוק את זה בשידור חי הדגמה של CodePen כדי להציץ במטען שיצרנו בפעולה.

כיצד ליישם אנימציית טעינה עם 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 רכוש post 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() שיטה לקבל את האלמנט וליצור פונקציית callback לטיפול ב-a 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';
};

הערה: אנחנו משתמשים 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; });
});

סיכום

במאמר זה, למדנו כיצד להשתמש ב-vanilla JavaScript כדי ליצור אנימציה טעינה ולהציג אותה כראוי. שקלנו גישות שונות להשגת זאת והסתכלנו על כמה מקרי שימוש שונים עבור האנימציה לטעינת. בחרנו להשתמש במעגל המסתובב בתור מעמיס, אבל אתה יכול לשנות אותו בכל דרך שתרצה - אל תהסס ליצור משלך GIF או מטעין מונפש מסוג CSS.

בול זמן:

עוד מ Stackabuse