ایجاد: ۶:۰۷ ۱۳۹۲/۸/۲۳
ویرایش: ۱۵:۴۵ ۱۳۹۳/۱۰/۱۳

آموزش‌ها

»

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

کاهش تعداد درخواست‌ها، یکی از روش‌های بهینه‌سازی سایت و کاهش بار سرور است که روش‌های متعددی دارد. در این آموزش ما به مشکل فایل انیمیشن 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

مدیریت

نام وسیله

اعتبار ورود

نام کاربری

رمز عبور

رمز یکبارمصرف

... لیست تمام آموزش‌ها

تبلیغات

ربات‌های تلگرامی:
مجموعه ربات‌های تلگرامی ما برای ساده‌تر کردن کار با تلگرام و مدیریت کانال و ...
خرید هاست (فضا):
دنبال یک هاست به صرفه برای شروع کار می‌گردید؟
مشخصات و قیمت‌های این مورد رو ببینید. من سال‌ها مشتری‌شون بودم و پشتیبانی‌شون هم خوب بود.
دامنه‌های فروشی:
دامنه‌های زیر مربوط به ما یا مشتریان ماست که قابل فروش هستند. در صورت تمایل به خرید یکی از آنها، مبلغ پیشنهادی را از طریق فرم ارتباطی برای ما ارسال نمایید.

دامنه‌هایی که می‌تواند مصرف مذهبی داشته باشد:
دامنه‌هایی که می‌تواند مصرف تخصصی داشته باشد:
دامنه‌هایی که می‌تواند مصرف شخصی/عمومی داشته باشد: