لیزی لود کردن تصاویر در آنگولار فقط با چند خط کد

  • آخرین بروزرسانی در چهارشنبه 26 آگوست 2020

    Average rating 5 / 5. Vote count: 1

لیزی لود کردن تصاویر یا Image Lazy Loading به فرآیند تقسیم بارگذاری تصاویر در یک صفحه می گویند به صورتی که تصاویری که هنوز در Viewport وجود ندارند، بارگذاری نشوند و هنگامی که کاربر صفحه را اسکرول کرد، بارگذاری آن تصاویر آغاز شود. با استفاده از این روش، می توانید عملکرد صفحه را بهتر کنید و بارگذاری صفحه شما زمان کمتری خواهد گرفت. در ادامه روش پیاده سازی لیزی لودینگ را در فریمورک آنگولار توضیح خواهیم داد.

استفاده از خاصیت Loading برای لیزی لودینگ

مرورگر های جدید وب به صورت پیشفرض از خاصیت لیزی لودینگ تصاویر پشتیبانی می کنند.

شما می توانید به سادگی و با اضافه کردن یک Atrribute (خاصیت) به المنت img از این روش بهره مند شوید.

<img src="src.png" alt="Angular" loading="lazy"> 

خاصیت loading می تواند سه مقدار auto، eager و lazy بگیرد.

اگر مقدار lazy را به آن بدهید باعث می شود که فقط در صورتی آن تصویر بارگذاری شود که کاربر در صفحه دستگاهش آن را می بیند.

بنابراین با استفاده از کد زیر در فریمورک آنگولار می توانیم لیزی لود کردن تصاویر را پیاده سازی کنیم.

البته اگر مرورگر از آن پشتیبانی کند:

پشتیبانی از خاصیت loading در مرورگر های مختلف
خاصیت Loading در مرورگر های مختلف

کد لیزی لود کردن تصاویر در آنگولار

import { Directive, ElementRef } from '@angular/core';

@Directive({ selector: 'img' })
export class LazyImgDirective {
  constructor({ nativeElement }: ElementRef<HTMLImageElement>) {
    const supports = 'loading' in HTMLImageElement.prototype;

    if (supports) {
      nativeElement.setAttribute('loading', 'lazy');
    }
  }
}

در کد بالا پشتیبانی مرورگر وب را از این قابلیت بررسی می کنیم.

اگر پشتیبانی کند خاصیت loading را به تصویر اضافه می کنیم.

اگر نه المنت img دست نخورده باقی می ماند.

بررسی پیاده سازی لیزی لودینگ در آنگولار

با اضافه کردن else به شرط کد بالا می توانید از IntersectionObserver برای پیاده سازی لیزی لودینگ در مرورگر هایی که از این خاصیت به صورت پیشفرض پشتیبانی نمی کنند، استفاده کنید.

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

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

برای دنبال کردن نوشته های کاپ کد به کانال تلگرامی آن (cupcode_ir@) بپیوندید!

دیدگاه خود را بیان کنید

@