آموزش‌ها

»

حذف درخواست اضافه تصویر انیمیشن لودینگ

کاهش تعداد درخواست‌ها، یکی از روش‌های بهینه‌سازی سایت و کاهش بار سرور است که روش‌های متعددی دارد. در این آموزش ما به مشکل فایل انیمیشن Loading (انتظار کاربر برای بارگذاری یک صفحه یا مطلب ای‌جکسی) می‌پردازیم که در اکثر صفحات سایت‌های مدرن نیاز است و به صورت یک فایل gif (مثلا به نام loading.gif) به صورت یک درخواست (request) مجزا لود می‌شود.

روش اول: استفاده از Data URi

همانطور که قبلا در مطلب «داده‌ها و تصاویر درون‌برنامه‌ای» گفتیم، شما می‌توانید فایل تصویری را به صورت inline در سورس صفحه و یا ترجیحا css قرار دهید. با این روش شما بجای بارگزاری تصویر یکی دو کیلوبایتی loading.gif و تحمیل یک درخواست اضافی به سرور و معطل کردن کاربر برای انجام این درخواست، این فایل 1~2 کیلوبایتی را همراه css صفحه لود می‌کنید.

روش دوم: استفاده از CSS3 یا SVG

این روش به نظرم از بقیه بهتر است. چون در حال حاضر بالای 90 درصد کاربران براوزرهای مدرن دارند که از css نسخه سوم و svg پشتیبانی می‌کنند و یکی از قابلیت‌های CSS3 و SVG ، ساخت انیمیشن است.
مثلا در اینجا ده‌ها مورد از آنها لیست شده که این مورد آن شما را یاد لودینگ‌های اندرویدی خواهد انداخت :)
سایت CSS Load نیز یک سرویس آنلاین جالب برای این منظور تهیه کرده است که با کمک آن به سادگی می‌توانید پس از انتخاب شمایل کلی Loading موردنظرتان، رنگ و سایز و سرعت و ... آن را تعیین کنید و کد CSS خود را تحویل بگیرید :)
در اینجا نیز پنج مثال ساده را می‌توانید ببینید.
بیش از 7 مثال دیگر به همراه سورس، در این صفحه و همچنین اینجا و اینجا قابل مشاهده است.
waitMe و ProBars نیز دو کتابخانه ساده و جالب و جدید در این زمینه است که نمای زیبایی نیز دارند.
درباره ساخت انیمیشن با SVG نیز در مطلبی که درباره گرافیک برداری نوشتیم، منابعی اشاره شد. به عنوان نمونه 12 نمونه انیمیشن loading که به کمک SVG ساخته شده را می‌توانید در اینجا ببینید.

روش سوم: استفاده از جاوا اسکریپت

این روش به خوبی دو روش بالا نیست چون هم باید مطمئن باشیم که جاوا اسکریپت در دستگاه کاربر فعال است و هم اینکه به صرف نمایش، حرکت نمی‌کند و حتما باید توسط یک رویداد استارت زده شود و پس از اتمام متوقف شود و الا cpu ی زیادتری (نسبت به دو روش فوق) مصرف می‌کند و ممکن است تعدد استفاده از آن در یک صفحه موجب کندی صفحه گردد. در این روش معمولا با استفاده از توابع زمان بندی (ست اینتروال) که در javascript وجود دارد، یک انیمیشن ایجاد می‌شود.
یک نمونه بسیار ساده چند خطی! آن را می‌توانید در اینجا ببینید.
با یک جستجو می‌توان نمونه‌های زیادی از loading های جاوا اسکریپتی پیدا کرد که شاید بهترین و کامل‌ترین آنها spin.js باشد که 2 کیلوبایت حجم دارد و تنظیمات جالبی دارد. spin.js در تمامی براوزرها (حتی IE6) به خوبی کار می‌کند.

روش چهارم: استفاده از Canvas

این روش هم بالاخره یک روش است! اما به دلیل حجم بالای خروجی، برای این کار (نمایش loading ی که با یکی دو کیلوبایت هم میسر است) به صرفه نیست. در اینجا و اینجا دو نمونه آن را می‌توانید مشاهده بفرمایید.

---

یادداشت‌های مرتبط

1. گرافیک برداری
2. سرویس های آنلاین رایگان برای نوشتن، تست و بهینه سازی کدهای برنامه نویسی
3. بکارگیری pushState و replaceState در برنامه نویسی سایت های ای جکسی
4. نمودارها در صفحات وب
5. استفاده از فونت دلخواه در صفحات وب
6. انیمیشن با CSS
7. همه چیز درباره داده ها و تصاویر Inline درون برنامه ای
8. طراحی وب واکنشی
9. نکاتی برای افزایش سرعت و کارآمدی سایت
10. اعتبارسنجی و شکل دهی فرم ها با استفاده از html5
11. همه چیز درباره کش(cache) سمت سرور و کاربر
12. پخش کننده های فایل صوتی تصویری در صفحات وب
13. برنامه نویسی اندروید
14. کلید خارجی (Foreign Key) ، محاسن و معایب آن
15. کار با تصاویر در سمت کاربر
16. همه آن چیزهایی که لازم است درباره ی فید بدانید
17. هنر css نویسی (نکاتی برای بهتر نوشتن استایل صفحات وب)
18. استفاده از Media Queries ها و اصلاح عدم پشتیبانی IE6-8
19. نمونه کارهایی با اچ تی ام ال پنچ