آموزش Hugo Image Lazyloading با Lazysizes. js (بارگذاری تنبل تصاویر در همه مرورگرها)
Hugo Image Lazyloading with Lazysizes. js (Lazy load images in all browsers)
این کلاس مهارت‌هایی را به شما می‌آموزد که برای اجرای تنبلی بارگذاری تصویر با Hugo نیاز دارید.
کتابخانه lazysizes بارگذاری تنبل را برای مرورگرهای قدیمی‌تر که به صورت بومی از آن پشتیبانی نمی‌کنند، فعال می‌کند.
همچنین فرآیند تعیین ویژگی اندازه‌ها در تصاویر واکنشگرا را خودکار می‌کند.
اگر ابتدا تصاویر پاسخگو و دوره پردازش تصویر من را کامل کنید، این دوره را بسیار آسان تر خواهید یافت.
پروژه کلاس شامل ایجاد یک وب سایت نمونه کارها است که شامل نمونه هایی از پیاده سازی بارگذاری تنبل است.
سپس یک قطعه بارگذاری تنبل ایجاد میکنید تا بتوانید دوباره از کد خود در وب‌سایت‌های دیگر استفاده کنید.
سپس می توانید کد را مطابق با نیازهای خود تغییر دهید.
تصاویری از کار تکمیل شده خود و پیوندهایی به کد خود آپلود کنید تا سایر دانش آموزان و من بتوانیم کار شما را ببینیم و به شما کمک کنیم.
پیوندها:
شروع به کار
- https://github.com/gohugoio/hugo/releases
درس 3
https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
https://caniuse.com/loading-lazy-attr
درس 4
https://github.com/aFarkas/lazysizes
https://www.jsdelivr.com/package/npm/lazysizes
درس ها Lessons
-
محو کردن Blur-up
-
تصاویر غیر پاسخگو Non-responsive Images
-
Outro و سفارشی کردن کد خود Outro and Customise your code
-
شروع شدن Getting Started
-
بومی تنبل بارگیری Native Lazy Loading
-
تصاویر پاسخگو با عرض متغیر Variable width responsive images
-
مقدمه Introduction
-
تنبلی از طریق CDN Lazysizes via CDN
-
دوباره از کد خود با جزئی استفاده کنید Re-use your code with a partial
-
پشتیبانی از noscript noscript support
-
LQIP LQIP
-
با تصاویر واکنشگرا رفع شد Fixed with responsive images
-
تنبلی به عنوان یک وابستگی به NPM Lazysizes as a NPM dependency
-
پیش فرض های جزئی و پیکربندی Partial defaults and configuration
-
پشتیبانی از بارگذاری تنبل بومی Lazysizes Lazysizes native lazy loading support
نمایش نظرات
نظری ارسال نشده است.
https://donyad.com/d/03a6
آموزش انیمیشن های شگفت انگیز حیوانات: با نمک استاپ موشن جذاب ایجاد کنید
Enchanting Animal Animations: Create Captivating Stop Motion with Salt
"پتانسیل خلاقیت خود را باز کنید و هنر جذاب انیمیشن استاپ موشن مبتنی بر نمک را بیاموزید. در این کلاس مبتدی دوستانه، جادوی ... را کشف خواهید کرد."
آموزش آبرنگ برای طراحی الگوی سطح: کار با Adobe Illustrator
Watercolor for Surface Pattern Design: Working with Adobe Illustrator
" این دوره به طور خاص برای Illustrator طراحی شده است که می خواهد آثار هنری نقاشی شده و آبرنگ را با استفاده از Adobe Illustrator در طرح های خود بگنجاند. ساعت .."
آموزش درختان کاج برفی را در 5 سبک با کریتا رنگ آمیزی کنید - Digital Art Skills 2024
Paint Snowy Pine Trees in 5 Styles with Krita - Digital Art Skills 2024
"خوش آمدی! در این دوره یاد خواهید گرفت که چگونه 5 سبک درخت کاج برفی را با کریتا رنگ آمیزی کنید. این نرم افزار هنر دیجیتال کاملا رایگان است و می توانید دانلود کنید. .."
آموزش آبرنگ و ترکیبی
Watercolor and Mixed Media
"به دومین کلاس Skillshare من خوش آمدید! هدف این کلاس برای کاربران سطح متوسط آبرنگ است. اگر مبتدی هستید، لطفاً در اولین کلاس من شرکت کنید: Mode. ..."
Sean Emerson
توسعه دهنده وب و متخصص سایت استاتیک
Skillshare (اسکیل شیر)
اسکیل‌شر یک پلتفرم آموزشی آنلاین است که به میلیون‌ها افراد در سراسر جهان امکان یادگیری مهارت‌های جدید را فراهم می‌کند. این پلتفرم با ارائه دوره‌های متنوع در زمینه‌هایی از جمله هنر و طراحی، فناوری، کسب و کار، و زندگی موفق، به کاربران خود این امکان را می‌دهد تا به صورت آنلاین به یادگیری بپردازند.
یکی از ویژگی‌های منحصر به فرد سکیل‌شر، ارائه دوره‌های تدریس شده توسط صاحبان مهارت‌ها و افراد موفق در زمینه‌های مختلف است. این امر باعث می‌شود که کاربران از تجربیات و دانش عملی افرادی که در حوزه‌های مورد نظرشان موفق عمل کرده‌اند، بهره‌مند شوند و بهترین اطلاعات را برای بهبود مهارت‌های خود دریافت کنند. به این ترتیب، سکیل‌شر نه تنها یک پلتفرم آموزشی است، بلکه یک جامعه آموزشی است که افراد را به اشتراک گذاری دانش و تجربیات تشویق می‌کند و به آنها کمک می‌کند تا در مسیر پیشرفت و موفقیت خود ادامه دهند.