یکی از مهم ترین تدابیر جهت زیبا تر شدن رابط کاربری سایت و افزایش سرعت لود سایت lazy load کردن تصاویر است . یعنی تصاویر تا زمانی که لود نشده اند یا در دید کاربر قرار نگرفته اند لود نشوند و به جای آنها یک تصویر ثابت با حجم کم نمایش داده شود . برای یادگیری پیاده سازی آن در Angular در ادامه پست با من همراه باشید

سلام محمد رجب زاده هستم و تو این پست میخوایم باهم دیگه lazy load کردن تصاویر در Angular رو بررسی کنیم 

lazy load کردن تصاویر به معنی قرار دادن تصویر جایگزین بجای تصاویر تا زمان لود آن ها و عدم اقدام به لود تصاویر تا زمان قرار گرفتن در دید کاربر می باشد

در اولین مرحله باید پکیج ng-lazyload-image رو با دستور زیر روی پروژه نصب کنیم

npm install ng-lazyload-image

نحوه استفاده از این کامپوننت خیلی ساده تر از اون چیزی هست که شما فکر میکنید فقط کافیه دو attribute رو توی همون تگ های img معمولی قرار بدین تا lazy load توی پروژه شما فعال بشه

در نظر بگیرید که نمونه کد تصاویر شما به شکل زیر باشه

<img src="IMAGE_LINK" />

حالا کافیه که شما src رو حذف کنید و بجاش [defaultImage] رو برای تصویر جایگزین و [lazyLoad] رو برای تصویر اصلی قرار بدین . اگر متوجه نشدین باید چکار کنین هیچ اشکالی نداره به نمونه کد زیر توجه کنید

<img [defaultImage]="'PLACEHOLDER_IMAGE_LINK'" [lazyLoad]="'ORIGINAL_IMAGE_LINK'" />

به همین راحتی میتونید خیلی ساده lazy load رو در انگولار استفاده کنید و هم سرعت لود ساییتون رو بیشتر کنید هم ظاهر سایتتون در تا زمانی که تصاویرتون لود نشدن زیبا تر کنید

البته حتما به این نکته توجه کنید که بهتره از تصاویر سبک و با حجم پایین بعنوان placeholder استفاده کنید

خوشحال میشم این زیر نظرت رو برام بنویسی