تصاویر

تگ img از LazyLoad پشتیبانی میکند تا بعد از بارگذاری سایر قسمت های مهم صفحه نمایش داده شود. این برای بهبود سرعت صفحه استفاده میشود و توصیه میشود تا جایی که ممکن است از آن استفاده کنید.

html

<img
  class="img-fluid preload-img"
  src="images/empty.png"
  data-src="location/image.png"
  alt="image" />

وقتی میخواهید preload را به یک تصویر اضافه کنید، کد بالا باید ساختار استاندارد آن باشد.

کلاس img-fluid: زمانی استفاده میشود که میخواهید تصویر شما نسبت ابعاد را حفظ کند و به اندازه کامل ظرفی که در آن قرار دارد، گسترش یابد.
کلاس preload-img: کلاسی است که باید اضافه کنید تا به کد بگویید که این تصویر از قبل preload خواهد شد.

Attribute: src="images/empty" هنگامی که صفحه شما بالا می آید، به طور پیشفرض بارگیری میشود، این تصویر باید یک تصویر بندانگشتی باشد.
Attribute: data-src="image.png" تصویر اصلی است که پس از اتمام بارگیری عناصر مهم صفحه شما، بارگذاری میشود.

میتوانید با استفاده از کلاس های کمکی، به تصاویر خود سبک بیشتری دهید.