آموزش 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
Skillshare (اسکیل شیر)
اسکیل‌شر یک پلتفرم آموزشی آنلاین است که به میلیون‌ها افراد در سراسر جهان امکان یادگیری مهارت‌های جدید را فراهم می‌کند. این پلتفرم با ارائه دوره‌های متنوع در زمینه‌هایی از جمله هنر و طراحی، فناوری، کسب و کار، و زندگی موفق، به کاربران خود این امکان را می‌دهد تا به صورت آنلاین به یادگیری بپردازند.
یکی از ویژگی‌های منحصر به فرد سکیل‌شر، ارائه دوره‌های تدریس شده توسط صاحبان مهارت‌ها و افراد موفق در زمینه‌های مختلف است. این امر باعث می‌شود که کاربران از تجربیات و دانش عملی افرادی که در حوزه‌های مورد نظرشان موفق عمل کرده‌اند، بهره‌مند شوند و بهترین اطلاعات را برای بهبود مهارت‌های خود دریافت کنند. به این ترتیب، سکیل‌شر نه تنها یک پلتفرم آموزشی است، بلکه یک جامعه آموزشی است که افراد را به اشتراک گذاری دانش و تجربیات تشویق می‌کند و به آنها کمک می‌کند تا در مسیر پیشرفت و موفقیت خود ادامه دهند.
https://donyad.com/d/03a6
Sean Emerson
توسعه دهنده وب و متخصص سایت استاتیک
نمایش نظرات