جاري التحميل… الرسوم المتحركة في Vanilla JavaScript

المُقدّمة

عند تطوير مواقع الويب وتطبيقات الويب ، يمكن أن يؤدي تضمين تحميل الرسوم المتحركة إلى تحسين تجربة المستخدم بشكل كبير من خلال توصيل ما يحدث. يؤدي ذلك إلى جذب المستخدمين والحفاظ على انتباههم أثناء تحميل المحتوى ، كما يساعد المستخدمين على فهم ما يجري بدلاً من تركهم في حالة تخمين.

في هذا الدليل ، سننظر في كيفية استخدام Vanilla JavaScript لإنشاء رسوم متحركة للتحميل. سنعمل مع كل من الرسوم المتحركة صور GIF وبرامج التحميل التي تم إنشاؤها بواسطة CSS ومعرفة كيفية استخدامها في سيناريوهين: تحميل المحتوى عند تشغيل التطبيق / موقع الويب أو طلب محتوى من واجهة برمجة تطبيقات خارجية.

كيفية إنشاء محمل

هناك طرق مختلفة قد يرغب الناس في عرض محملهم بها. لغرض هذا الدليل ، سننشئ أداة تحميل تغطي الشاشة بأكملها ثم تختفي عند الانتهاء من تحميل الصفحة. بادئ ذي بدء ، نحتاج إلى إنشاء صفحة 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 يتم التحميل في منتصف الشاشة ، على غرار ما يلي:

في هذه المرحلة ، نحن جاهزون لتنفيذ التحميل باستخدام JavaScript. ولكن دعنا نرى أيضًا كيف يمكننا استخدام الرسوم المتحركة التي تم إنشاؤها بواسطة CSS بدلاً من ملف 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-container-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);
});

في هذه المرحلة ، عندما نقوم بتحميل صفحتنا ، سيتم عرض الرسوم المتحركة للتحميل حتى يتم تحميل محتوى الصفحة بالكامل.

تنفيذ تحميل الرسوم المتحركة عند طلب محتوى خارجي من واجهة برمجة تطبيقات

يعد جلب المحتوى من واجهة برمجة تطبيقات خارجية موقفًا آخر قد يحتاج إلى تضمين أداة تحميل. قد يستغرق هذا النوع من المحتوى بعض الوقت لجلبه وعرضه ، لذلك من الأفضل تضمين أداة تحميل.

في حالتنا ، دعنا نحاول الحصول على عرض أسعار من a يقتبس API باستخدام واجهة برمجة تطبيقات Fetch المدمجة. لاحظ أن 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; });
});

وفي الختام

في هذه المقالة ، تعلمنا كيفية استخدام Vanilla JavaScript لإنشاء رسوم متحركة للتحميل وعرضها بشكل مناسب. لقد درسنا طرقًا مختلفة لإنجاز ذلك وألقينا نظرة على عدة حالات استخدام مختلفة لتحميل الرسوم المتحركة. لقد اخترنا استخدام الدائرة الدوارة كمحمل ، ولكن يمكنك تغييرها بأي طريقة تريدها - لا تتردد في إنشاء الدائرة الخاصة بك GIF أو محمل الرسوم المتحركة CSS.

• كوينسمارت. أفضل بورصة للبيتكوين والعملات المشفرة في أوروبا.
• بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. دخول مجاني.
• كريبتوهوك. الرادار. تجربة مجانية.
• المصدر: https://stackabuse.com/loading-animation-in-vanilla-javascript/