آموزش 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
Sean Emerson
توسعه دهنده وب و متخصص سایت استاتیک
نمایش نظرات