Yandex Metrica
Angular 13 Lazy Loading İle Resim Yükleme - Yasin Sunmaz

Yasin Sunmaz

Kodladıkça değişen bir dünya...

Angular 13 Lazy Loading İle Resim Yükleme

23.02.2022 yasinsunmaz 1325 0

Angular projelerimizde görselleri fazla kullandığımızda performans sorunu yaşayabiliriz. Sayfadaki görselleri tek seferde yüklemek yerine sadece sayfanın görünen kısmını kapsayan görselleri yüklemeye yarayan lazyload-image paketini kullanabiliriz. Sayfayı aşağıya doğru kaydırdıkça diğer görselleri yüklemeye başlar. Örnek vermek gerekirse sayfamızda 10 tane görselimiz olsa ve her biri 2 MB gibi bir boyutta olduğunu düşünelim. Normal şartlarda sayfamızı ilk açmaya çalıştığımızda 10x2=20MB gibi bir yükleme yapması gerekecek. Performans ve kullanıcı deneyimi açısında hoş olmayan bir durum. İşte bu durumu çözmek için lazyload-image paketini projemize entegre edip kullanabiliriz. Gelelim lazyload-image paketini projemizde nasıl kullanacağız?

1. Adım lazyload-image paketi indirme

İlgili paketi projeye indiriyoruz.

npm i ng-lazyload-image

2. Adım paketi projeye dahil etme

Projeyi indirdikten sonra "app.module.ts" sayfasına giderek import kısmına "LazyLoadImageModule" paketini tanımlıyoruz.

import{ LazyLoadImageModule} from 'ng-lazyload-image';
@NgModule({
declarations: [...],
imports: [
LazyLoadImageModule 
],
bootstrap: [...]
})
export class AppModule { }

3. Adım component.ts dosyamıza görselleri tanımlama

Siz hangi componentte kullanacaksanız ona göre uyarlayabilirsiniz. Ben bu örnekte app.component.ts sayfasını kullandım. Görsellerin boyutları oldukça fazla. Farkı anlamanız için yüksek boyutlu görseller kullandım. Uygulamanın ön izlemesini zaten sonraki adımlarda göstereceğim.

import { Component} from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  image1="https://images.unsplash.com/photo-1581789164394-810293cd79ce";
  image2="https://images.unsplash.com/photo-1562690868-60bbe7293e94";
  image3="https://images.unsplash.com/photo-1536677813196-8fed27bcecdc"
  image4="https://images.unsplash.com/photo-1599198688091-926a8df3c9be"

  defaultImage = 'https://via.placeholder.com/1000/09f/fff.png';
}

4. Adım tanımladığımız görselleri component.html dosyasında kullanma

Görselleri sayfamıza aşağıdaki gibi çağırıyoruz. defaultImage bizim varsayılan görsel olarak kullanmak istediğimiz zaman kullanabiliriz.

Lazyload-image kullanımı

Son Adım Uygulamanın Önizlemesi

Gördüğünüz gibi sayfada aşağıya doğru indikçe görseller yüklenmeye başlıyor. Aksi durumda herhangi bir yüklenme olmayacaktır. Bu sayede sadece istek doğrultusunda görseller yüklenecektir. İlk baktığımızda sadece bir görselin yüklendiğini görebiliriz.

Lazyload-image Kullanımı

Sayfanın biraz daha aşağısına doğru inmeye başladığımızda sırasıyla diğer görsellerin de yüklendiğini görebilirsiniz.

Lazyload-image Kullanımı

Görseller bitinceye kadar bu işlem bu şekilde devam etmektedir.

Lazyload-image Kullanımı

Angular'da lazyload-image kullanımını sizlere anlatmaya çalıştım. Umarım faydalı olmuştur. İyi çalışmalar.

  • Yorum yapabilmek için giriş yapmalısınız. Giriş yapmak için tıklayınız.

Diğer Yazılar

Visual Studio Code'da Angular İçin En İyi Eklentiler

05.07.2023 yasinsunmaz 615 0

Angular, modern web uygulamaları geliştirmek için popüler bir JavaScript çatısıdır. Angular projelerinizde daha verimli çalışmak ve geliştirme süreci...

Angular "bundle initial exceeded maximum budget" Hatası Çözümü

29.06.2023 yasinsunmaz 282 0

Angular'da aldığım "Error: bundle initial exceeded maximum budget. Budget 1.00 MB was not met by 745.34 kB with a total of 1.73 MB." hatasının çöz&uu...

Angular "exceeded maximum budget" Hatası Çözümü

27.06.2023 yasinsunmaz 329 0

Angular'da aldığım "exceeded maximum budget. Budget 4.00 kB was not met by 10.22 kB with a total of 14.22 kB." hatasının çözümünü bu yazımd...

Angular 13 Validator Kullanımı

14.03.2022 yasinsunmaz 1180 0

Angular'da form uygulamalarımızda verilerin daha düzgün alınması ve gerekli sınırlamalara göre veri girişinin olması oldukça önemlidir. En temel kont...

MIME type ('text/html') is not a supported stylesheet MIME type Hatası Çözümü

27.02.2022 yasinsunmaz 1592 0

Angular'da projenin tasarımını yaparken genel CSS'ler için style.css dosyamı hazırladım. Fakat projeyi çalıştırdığımda CSS kodları sayfada etkin gör...