Weltpixel : Lazy Loading Pro

Lazy Loading membantu ketika load image product belum selesai, maka Lazy load yang akan muncul. Lazy Loading Pro telah terintegrasi dengan fungsionalitas Magento 2 secara default, Lazy Load telah diterapkan pada Product listing pages maupun pada search pages 

Konfigurasi Weltpixel : Lazy Loading Pro pada Admin

Untuk dapat mengkonfigurasikan Lazy Load adalah sebagai berikut :

  1. Masuk pada Dashboard admin. terdapat dua cara untuk masuk pada konfigurasi Lazy load melalui admin,

yaitu melalui menu Weltpixel pada dashboard, maupun Melalui Store Config. Keduanya merujuk pada Konfigurasi yang sama, yaitu Lazy Load.

 2. Melalui menu Weltpixel > Lazy Loading Pro 
 3. Pilih Lazy Loading Setting.


Gambar 1 : Tampilan Konfigurasi Weltpixel : Lazy Loading Pro pada Dashboard Backoffice


  1. Melalui Store > Configuration > Weltpixel > Lazy Load


Gambar 2 : Tampilan Konfigurasi Weltpixel : Lazy Loading Pro pada Dashboard Backoffice

  1. Expand pada General Setting : Set Enable Yes, untuk mengaktifkan Lazy load


Gambar 3 : Tampilan Konfigurasi Weltpixel : Lazy Loading Pro pada Dashboard Backoffice


  1. Expand pada Advanced Setting

    1. Start Loading Early : Set Enable Yes untuk mengaktifkan, dan untuk memuat gambar lebih awal dari yang terlihat di viewport atau layar.

    2. Negative Margin : Masukkan threshold di mana gambar akan dimuat, sebelum muncul di layar. Misalnya, masukkan 300, untuk gambar yang akan dimuat pada 300px dari viewport atau layar

    3. Effect Speed : Kecepatan Efek dalam satuan milisecond. Misalnya masukkan 1000 untuk 1 detik kecepatan animasi.

    4. Loading Placeholder : Set enable No jika hanya menggunakan Placeholder default,  Yes untuk untuk dapat melakukan upload placeholder secara custom. Di bawah ini Anda dapat mengunggah file Anda sendiri


Gambar 4 : Tampilan Konfigurasi Weltpixel : Lazy Loading Pro pada Dashboard Backoffice

  1. Loading Icon : File yang akan digunakan sebagai Icon saat Loader berjalan.

File ini harus berekstensi Only 'jpg', 'jpeg', 'gif', 'png', 'svg' saja.

  1. Placeholder Width : Ukuran Placeholder dalam satuan Pixel. Misalnya masukkan 50 untuk lebar 50px.

  2. Klik Save untuk menyimpan perubahan.



Tampilan Weltpixel : Lazy Loading Pro



Gambar 5 : Tampilan Lazy Loading Pro di Category Product Listing Page pada Category page

Image Placeholder

Gambar 6 : Tampilan Lazy Loading Pro di Category Product Listing Page pada Search page