از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
در حال بارگیری… انیمیشن در جاوا اسکریپت Vanilla هنگام توسعه وب سایت ها و برنامه های کاربردی وب، از جمله بارگذاری انیمیشن، می تواند تجربه کاربر را به طور قابل توجهی با برقراری ارتباط با آنچه در حال انجام است بهبود بخشد. روی. این کار کاربران را درگیر می کند و توجه آنها را در حین بارگذاری محتوا حفظ می کند و به کاربران کمک می کند بفهمند چه اتفاقی می افتد روی به جای اینکه آنها را حدس بزنند. در این راهنما، ما…
سرفصلهای مطلب
معرفی
هنگام توسعه وب‌سایت‌ها و برنامه‌های کاربردی وب، از جمله بارگذاری انیمیشن، می‌تواند تجربه کاربر را به طور قابل توجهی با برقراری ارتباط با آنچه در حال انجام است بهبود بخشد. روی. این کار کاربران را درگیر می کند و توجه آنها را در حین بارگذاری محتوا حفظ می کند و به کاربران کمک می کند بفهمند چه اتفاقی می افتد روی به جای اینکه آنها را حدس بزنند.
در این راهنما، روش استفاده از جاوا اسکریپت Vanilla برای ایجاد یک انیمیشن بارگیری را بررسی خواهیم کرد. ما با هر دو انیمیشن کار خواهیم کرد GIF ها و لودرهای ایجاد شده توسط CSS و روش استفاده از آنها را در دو سناریو ببینید: بارگیری محتوا در راه اندازی برنامه/وب سایت یا درخواست محتوا از یک API خارجی.
روش ایجاد لودر
راه های مختلفی وجود دارد که افراد ممکن است بخواهند لودر خود را نمایش دهند. برای هدف این راهنما، ما یک لودر می‌سازیم که کل صفحه را پوشش می‌دهد و پس از آن ناپدید می‌شود page بارگذاری به پایان رسیده است. اول از همه، ما باید یک مکان نگهدار HTML ایجاد کنیم page:
<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
آ GIF یک نماد متحرک است که به طور نامحدود پخش می شود. یک بار ما خود را ایجاد کرده ایم GIF، ما به آن استایل می دهیم loader-container div که آن را در خود جای خواهد داد. راه های زیادی برای استایل دادن به آن وجود دارد! در اینجا می توانید واقعا خلاق باشید. ما به سادگی یک لایه با پس زمینه سیاه اضافه می کنیم روی بالای ما page در کنار نماد، برای “مسدود کردن” محتوای بارگیری:
.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;
}
وقتی وب خود را بارگذاری می کنیم page اکنون، یک پس‌زمینه مشکی با a را خواهیم دید GIF بارگذاری در وسط صفحه، مشابه این:
در این مرحله، ما آماده اجرای بارگیری با استفاده از جاوا اسکریپت هستیم. اما بیایید همچنین ببینیم که چگونه می‌توانیم از انیمیشن ساخته شده با CSS به جای a استفاده کنیم GIF، که نیازی به فایل اضافی ندارد import.
ایجاد لودر با استفاده از 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 ایجاد کنیم که اکنون می توانیم از لودر استفاده کنیم.container div را در مرکز قرار دهید و پس زمینه سیاه را همانطور که قبلا انجام دادیم اضافه کنید:
.loader-container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
background: #000;
z-index: 1;
}
اکنون که دو نوع لودر متحرک موجود را دیدیم، بیایید از جاوا اسکریپت برای کنترل ظاهر شدن و ناپدید شدن این انیمیشن بارگیری استفاده کنیم.
توجه داشته باشید: شما می توانید این را به صورت زنده بررسی کنید نسخه ی نمایشی CodePen تا نگاهی به لودری که در عمل ایجاد کرده ایم بیندازیم.
روش پیاده سازی یک انیمیشن بارگیری با جاوا اسکریپت
جاوا اسکریپت به ما امکان می دهد ساختار HTML خود را دستکاری کنیم و آن را حذف یا مخفی کنیم loader-container که در حال حاضر نمایش داده می شود در مقابل محتوای وب سایت دو روش اصلی برای انجام این کار وجود دارد – فقط پنهان کردن loader-container، یا به طور کلی آن را حذف کنید.
هر رویکردی را که انتخاب کنید، اولین قدم استفاده از آن است querySelector() یا getElementById() برای بازیابی loader-container تا بتوانیم آن را دستکاری کنیم:
const loaderContainer = document.querySelector('.loader-container');
در مرحله دوم، ما از آن استفاده خواهیم کرد eventListener برای گوش دادن به load رویداد، به طوری که تابع callback را زمانی که load رویداد رخ می دهد:
window.addEventListener('load', () => {
// ...
});
پنهان کردن عنصر بارگیری…
متداول ترین روش پنهان کردن آن است loader-container با display: none به طوری که با بارگذاری کامل محتوا ناپدید می شود.
HTML DOM به ما اجازه می دهد تا سبک عناصر HTML خود را از جاوا اسکریپت تغییر دهیم و کد زیر نشان می دهد که ما در حال تنظیم لودر هستیم. container 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);
});
در این مرحله، زمانی که ما را بارگذاری می کنیم page، انیمیشن در حال بارگذاری تا زمانی نمایش داده می شود pageمحتوای به طور کامل بارگذاری شده است.
پیاده سازی بارگذاری انیمیشن هنگام درخواست محتوای خارجی از یک API
واکشی محتوا از یک API خارجی وضعیت دیگری است که ممکن است نیاز به گنجاندن یک لودر داشته باشد. واکشی و نمایش این نوع محتوا ممکن است مدتی طول بکشد، بنابراین بهتر است یک لودر اضافه کنید.
در مورد ما، بیایید سعی کنیم یک نقل قول از a quotes 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، اما می توانیم از یکی از روش های دیگری که قبلاً ذکر کردیم استفاده کنیم.
در این مرحله، در نهایت می‌توانیم انیمیشن بارگذاری را در تابع callback قرار دهیم. هنگامی که واکشی شروع می شود، عملکرد پاسخ به تماس، انیمیشن بارگیری را نمایش می دهد و پس از دریافت داده، آن را پنهان می کند:
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;
});
});
نتیجه
در این مقاله یاد گرفتیم که چگونه از جاوا اسکریپت وانیلی برای ایجاد یک انیمیشن بارگذاری و نمایش مناسب آن استفاده کنیم. ما رویکردهای مختلفی را برای انجام این کار در نظر گرفتیم و به چند مورد مختلف برای بارگذاری انیمیشن نگاهی انداختیم. ما انتخاب کرده‌ایم که از دایره چرخان به‌عنوان بارکننده استفاده کنیم، اما شما می‌توانید آن را به هر شکلی که دوست دارید تغییر دهید – راحت باشید خودتان را ایجاد کنید. GIF یا لودر متحرک CSS.
منتشر شده در 1403-01-08 03:54:05
