Unduh vanilla lazyload - Unduh kode sumber vanilla lazyload

LazyLoad adalah skrip ringan (2,4 kB) dan fleksibel yang mempercepat aplikasi web Anda dengan menunda pemuatan gambar paruh bawah, animasi SVG, video, dan iframe hingga memasuki area pandang . Itu ditulis dalam JavaScript "vanilla" biasa, memanfaatkan API IntersectionObserver, mendukung gambar responsif, mengoptimalkan situs web Anda untuk koneksi yang lebih lambat, dan dapat mengaktifkan pemuatan lambat asli. Lihat semua fitur untuk mengetahui lebih lanjut.

➡️ Langsung ke: ?‍ Memulai - HTML - ?‍ Memulai - Skrip - ? Resep - Demo - ? Kiat & trik - ? API-? Semua fitur dibandingkan

Suka proyek ini? ? Belikan aku kopi!

?‍ Memulai - HTML

Untuk membuat konten Anda dimuat oleh LazyLoad, Anda harus menggunakan beberapa atribut data- , bukan atribut sebenarnya. Contoh di bawah ini.

Gambar malas:

 < img alt =" A lazy image " class =" lazy " data-src =" lazy.jpg " />

Gambar malas dengan placeholder berkualitas rendah:

 < img alt =" A lazy image " class =" lazy " src =" lazy-lowQuality.jpg " data-src =" lazy.jpg " />

Gambar responsif yang malas dengan `srcset` dan `sizes` :

 < img
  alt =" A lazy image "
  class =" lazy "
  data-src =" lazy.jpg "
  data-srcset =" lazy_400.jpg 400w, 
    lazy_800.jpg 800w "
  data-sizes =" 100w "
/>

Untuk mendapatkan placeholder berkualitas rendah, tambahkan atribut src yang menunjuk ke versi gambar yang sangat kecil. Misalnya src="lazy_10.jpg" .

Gambar responsif lambat dengan dukungan hi-dpi menggunakan tag `picture` :

 < picture >
  < source media =" (min-width: 1200px) " data-srcset =" lazy_1200.jpg 1x, lazy_2400.jpg 2x " />
  < source media =" (min-width: 800px) " data-srcset =" lazy_800.jpg 1x, lazy_1600.jpg 2x " />
  < img alt =" A lazy image " class =" lazy " data-src =" lazy.jpg " />
</ picture >

Untuk mendapatkan placeholder berkualitas rendah, tambahkan atribut src yang menunjuk ke versi gambar yang sangat kecil ke tag img . Misalnya src="lazy_10.jpg" .

Gambar responsif lambat dengan pemilihan format WebP otomatis, menggunakan tag `picture` :

 < picture >
  < source
    type =" image/webp "
    data-srcset =" lazy_400.webp 400w, 
      lazy_800.webp 800w "
    data-sizes =" 100w "
  />
  < img
    alt =" A lazy image "
    class =" lazy "
    data-src =" lazy.jpg "
    data-srcset =" lazy_400.jpg 400w, 
      lazy_800.jpg 800w "
    data-sizes =" 100w "
  />
</ picture >

Untuk mendapatkan placeholder berkualitas rendah, tambahkan atribut src yang menunjuk ke versi gambar yang sangat kecil ke tag img . Misalnya src="lazy_10.jpg" .

Gambar latar belakang malas

CATATAN PENTING : Untuk menampilkan gambar konten di halaman Anda, selalu gunakan tag img . Ini akan menguntungkan SEO dan aksesibilitas situs web Anda. Untuk memahami apakah gambar Anda adalah konten atau latar belakang, tanyakan pada diri Anda: "apakah pengguna situs web saya ingin melihat gambar tersebut saat mencetak halaman?". Jika jawabannya "ya", maka gambar Anda adalah gambar konten dan sebaiknya hindari penggunaan gambar latar belakang untuk menampilkannya.

Gambar latar belakang tunggal:

 < div class =" lazy " data-bg =" lazy.jpg " > </ div >

Latar belakang tunggal, dengan dukungan layar HiDPI:

 < div class =" lazy " data-bg =" lazy.jpg " data-bg-hidpi =" [email protected] " > </ div >

Berbagai latar belakang:

 < div
  class =" lazy "
  data-bg-multi =" url(lazy-head.jpg), 
    url(lazy-body.jpg), 
    linear-gradient(#fff, #ccc) "
>
  ...
</ div >

Berbagai latar belakang, dukungan layar HiDPI:

 < div
  class =" lazy "
  data-bg-multi =" url(lazy-head.jpg),
    url(lazy-body.jpg),
    linear-gradient(#fff, #ccc) "
  data-bg-multi-hidpi =" url([email protected]),
    url([email protected]),
    linear-gradient(#fff, #ccc) "
>
  ...
</ div >

Latar belakang dengan `image-set` :

 < div class =" lazy " data-bg-set =" url('[email protected]') 1x, url('[email protected]') 2x " > ... </ div >

Berbagai latar belakang dengan `image-set` :

 < div
  class =" lazy "
  data-bg-set ="
    url('[email protected]') 1x, url('[email protected]') 2x | 
    url('[email protected]') 1x, url('[email protected]') 2x
  "
>
  ...
</ div >

SVG animasi malas

 < object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object >

Video malas

 < video class =" lazy " controls width =" 620 " data-src =" lazy.mp4 " data-poster =" lazy.jpg " >
  < source type =" video/mp4 " data-src =" lazy.mp4 " />
  < source type =" video/ogg " data-src =" lazy.ogg " />
  < source type =" video/avi " data-src =" lazy.avi " />
</ video >

Harap dicatat bahwa poster video juga dapat dimuat dengan lambat.

Iframe malas

 < iframe class =" lazy " data-src =" lazyFrame.html " > </ iframe >

Suka proyek ini? ? Belikan aku kopi!

?‍ Memulai - Skrip

Versi LazyLoad terbaru yang direkomendasikan adalah 19.1.3 . Perhatikan bahwa jika Anda perlu mendukung Internet Explorer 11, Anda perlu menggunakan versi 17.9.0 atau lebih rendah.

Pahami dengan cepat cara meningkatkan versi dari versi sebelumnya dengan membaca panduan praktis peningkatan.

Cara yang sederhana dan termudah

Cara termudah untuk menggunakan LazyLoad adalah dengan memasukkan skrip dari CDN.

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js " > </ script >

ATAU, jika Anda lebih suka mengimpornya sebagai modul ES:

 < script type =" module " >
  import LazyLoad from "https://cdn.jsdelivr.net/npm/[email protected]/+esm" ;
</ script >

Kemudian, dalam kode javascript Anda:

 var lazyLoadInstance = new LazyLoad ( {
  // Your custom settings go here
} ) ;

Untuk memastikan DOM untuk konten lambat Anda sudah siap saat Anda membuat instance LazyLoad, tempatkan tag skrip tepat sebelum tag </body> penutup .

Jika lebih banyak DOM yang datang kemudian, misalnya melalui panggilan AJAX, Anda harus memanggil lazyLoadInstance.update(); untuk membuat LazyLoad memeriksa DOM lagi.

 lazyLoadInstance . update ( ) ;

Menggunakan skrip `async`

Jika Anda mau, Anda dapat memasukkan skrip LazyLoad menggunakan skrip async dan menginisialisasinya segera setelah dimuat.

Untuk melakukannya, Anda harus menentukan opsi sebelum menyertakan skrip . Anda dapat lulus:

{} sebuah objek untuk mendapatkan satu instance LazyLoad
[{}, {}] array objek untuk mendapatkan beberapa instance LazyLoad, masing-masing dengan opsi berbeda.

 < script >
  // Set the options globally
  // to make LazyLoad self-initialize
  window . lazyLoadOptions = {
    // Your custom settings go here
  } ;
</ script >

Kemudian sertakan skripnya.

 < script
  async
  src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js "
> </ script >

Mungkin menempatkan tag skrip tepat sebelum tag </body> penutup . Jika Anda tidak dapat melakukannya, LazyLoad dapat dijalankan sebelum browser memuat semua DOM, dan Anda harus memanggil metode update() agar browser memeriksa DOM lagi.

Menggunakan skrip `async` + mendapatkan referensi instance

Sama seperti di atas, tetapi Anda harus memasukkan kode addEventListener yang ditunjukkan di bawah ini sebelum menyertakan skrip async .

 < script >
  // Set the options globally
  // to make LazyLoad self-initialize
  window . lazyLoadOptions = {
    // Your custom settings go here
  } ;
  // Listen to the initialization event
  // and get the instance of LazyLoad
  window . addEventListener (
    "LazyLoad::Initialized" ,
    function ( event ) {
      window . lazyLoadInstance = event . detail . instance ;
    } ,
    false
  ) ;
</ script >

Kemudian sertakan skripnya.

 < script
  async
  src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js "
> </ script >

Sekarang Anda dapat memanggil metodenya, seperti:

 lazyLoadInstance . update ( ) ;

DEMO - SUMBER ← untuk satu instance LazyLoad

DEMO - SUMBER ← untuk beberapa instance LazyLoad

Pemasangan lokal

Jika Anda lebih suka menginstal LazyLoad secara lokal di proyek Anda, Anda bisa!

Menggunakan npm

 npm install vanilla-lazyload

Menggunakan punjung

 bower install vanilla-lazyload

Unduhan manual

Unduh salah satu rilis terbaru. File yang Anda butuhkan ada di dalam folder dist . Jika Anda tidak tahu mana yang harus dipilih, gunakan lazyload.min.js , atau baca tentang bundel.

Penggunaan lokal

Jika Anda menginstal LazyLoad secara lokal, Anda dapat mengimpornya sebagai modul ES seperti berikut:

 import LazyLoad from "vanilla-lazyload" ;

Dimungkinkan juga (tetapi tidak disarankan) untuk menggunakan sintaks require commonJS.

Informasi lebih lanjut tentang menggabungkan LazyLoad dengan WebPack tersedia di repo khusus ini.

Penggunaan dengan React

Lihatlah contoh penggunaan React dengan LazyLoad di Sandbox.

Implementasi ini menggunakan props yang sama dengan yang biasa Anda berikan ke tag img , tetapi ini menghasilkan gambar yang lambat. Jangan ragu untuk melakukan fork dan memperbaikinya!

bundel

Di dalam folder dist Anda akan menemukan bundel yang berbeda.

Nama file	Tipe Modul	Keuntungan
`lazyload.min.js`	UMD (Definisi Modul Universal)	Berfungsi hampir di mana saja, bahkan dalam konteks common-js
`lazyload.iife.min.js`	IIFE (Ekspresi Fungsi Segera Dipanggil)	Berfungsi sebagai `<script src="...">` dalam halaman, ~0,5kb lebih kecil dari versi UMD
`esm/lazyload.js`	Modul ES	Mengekspor `LazyLoad` sehingga Anda dapat mengimpornya ke proyek Anda menggunakan `<script type="module" src="...">` dan bundler seperti WebPack atau Rollup

Suka proyek ini? ? Belikan aku kopi!

? Resep

Ini adalah bagian di mana Anda dapat menemukan kode siap salin & tempel untuk kenyamanan Anda.

Sembunyikan teks alternatif dan gambar kosong

Kasus penggunaan : ketika gambar Anda dimuat dengan lambat, tampilkan teks alt dan ikon gambar kosong sebelum dimuat.

CSS

 img : not ([ src ]) : not ([ srcset ]) {
  visibility : hidden;
}

Hanya itu saja, sungguh.

Penanganan kesalahan gambar

Kasus penggunaan : ketika Anda ingin mencegah tampilan gambar yang tidak ada/rusak di situs web Anda.

skrip java

 var myLazyLoad = new LazyLoad ( {
  // Other options here...
  callback_error : ( img ) => {
    // Use the following line only if your images have the `srcset` attribute
    img . setAttribute ( "srcset" , "[email protected] 1x, [email protected] 2x" ) ;
    img . setAttribute ( "src" , "[email protected]" ) ;
  }
} ) ;

CATATAN: jika kesalahan disebabkan oleh jaringan yang tidak aktif (navigator jika offline sementara), vanilla-lazyload akan mencoba memuat gambar lagi ketika jaringan tersedia kembali.

CONTOH - API

Konten dinamis

Kasus penggunaan : ketika Anda ingin memuat gambar dengan lambat, tetapi jumlah gambar yang berubah di area gulir berubah, mungkin karena ditambahkan secara asinkron.

skrip java

 var myLazyLoad = new LazyLoad ( ) ;
// After your content has changed...
myLazyLoad . update ( ) ;

DEMO - SUMBER - API

Campuran pemuatan lambat berbasis asli dan JS

Kasus penggunaan : Anda ingin menggunakan opsi use_native untuk mendelegasikan pemuatan gambar, iframe, dan video ke mesin browser jika didukung, tetapi Anda juga ingin memuat gambar latar belakang dengan lambat.

HTML

 < img class =" lazy " alt =" A lazy image " data-src =" lazy.jpg " />
< iframe class =" lazy " data-src =" lazyFrame.html " > </ iframe >
< video class =" lazy " controls data-src =" lazy.mp4 " data-poster =" lazy.jpg " > ... </ video >
< object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object >
< div class =" lazy " data-bg =" lazy.jpg " > </ div >

skrip java

 // Instance using native lazy loading
const lazyContent = new LazyLoad ( {
  use_native : true // <-- there you go
} ) ;

// Instance without native lazy loading
const lazyBackground = new LazyLoad ( {
  // DON'T PASS use_native: true HERE
} ) ;

DEMO - SUMBER - API

Panel gulir

Kasus penggunaan : ketika wadah gulir Anda bukanlah jendela browser utama, melainkan wadah gulir.

HTML

 < div class =" scrollingPanel " >
  <!-- Set of images -->
</ div >

skrip java

 var myLazyLoad = new LazyLoad ( {
  container : document . querySelector ( ".scrollingPanel" )
} ) ;

DEMO - SUMBER - API

Jika Anda memiliki beberapa panel gulir, Anda dapat menggunakan markup dan kode berikut.

HTML

 < div id =" scrollingPanel1 " class =" scrollingPanel " >
  <!-- Set of images -->
</ div >
< div id =" scrollingPanel2 " class =" scrollingPanel " >
  <!-- Set of images -->
</ div >

skrip java

 var myLazyLoad1 = new LazyLoad ( {
  container : document . getElementById ( "scrollingPanel1" )
} ) ;
var myLazyLoad2 = new LazyLoad ( {
  container : document . getElementById ( "scrollingPanel2" )
} ) ;

DEMO - SUMBER - API

Fungsi malas

Kasus penggunaan : ketika Anda ingin menjalankan skrip atau fungsi arbitrer ketika elemen tertentu memasuki area pandang

HTML

 < div class =" lazy " data-lazy-function =" foo " > ... </ div >
< div class =" lazy " data-lazy-function =" bar " > ... </ div >
< div class =" lazy " data-lazy-function =" buzz " > ... </ div >
< div class =" lazy " data-lazy-function =" booya " > ... </ div >

 // It's a best practice to scope the function names inside a namespace like `lazyFunctions`.
window . lazyFunctions = {
  foo : function ( element ) {
    element . style . color = "red" ;
    console . log ( "foo" ) ;
  } ,
  bar : function ( element ) {
    element . remove ( element ) ;
    console . log ( "bar" ) ;
  } ,
  buzz : function ( element ) {
    var span = document . createElement ( "span" ) ;
    span . innerText = " - buzz!" ;
    element . appendChild ( span ) ;
    console . log ( "buzz" ) ;
  } ,
  booya : function ( element ) {
    element . classList . add ( "boo" ) ;
    console . log ( "booya" ) ;
  }
} ;

 function executeLazyFunction ( element ) {
  var lazyFunctionName = element . getAttribute ( "data-lazy-function" ) ;
  var lazyFunction = window . lazyFunctions [ lazyFunctionName ] ;
  if ( ! lazyFunction ) return ;
  lazyFunction ( element ) ;
}

var ll = new LazyLoad ( {
  unobserve_entered : true , // <- Avoid executing the function multiple times
  callback_enter : executeLazyFunction // Assigning the function defined above
} ) ;

Gunakan unobserve_entered untuk menghindari menjalankan fungsi beberapa kali.

Itu saja. Setiap kali elemen dengan atribut data-lazy-function memasuki viewport, LazyLoad memanggil fungsi executeLazyScript , yang mendapatkan nama fungsi dari atribut data-lazy-function itu sendiri dan mengeksekusinya.

DEMO - SUMBER - API

Inisialisasi lambat pada beberapa instance LazyLoad

Kasus penggunaan : ketika Anda memiliki banyak container yang bergulir secara horizontal dan Anda ingin membuat instance LazyLoad pada container tersebut, namun hanya saat container tersebut memasuki viewport.

HTML

 < div class =" horizContainer " >
  < img
    src =""
    alt =" Row 01, col 01 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_01&amp;w=200&amp;h=200 "
  />
  < img
    src =""
    alt =" Row 01, col 02 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_02&amp;w=200&amp;h=200 "
  />
  <!-- ... -->
</ div >
< div class =" horizContainer " >
  < img
    src =""
    alt =" Row 02, col 01 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_01&amp;w=200&amp;h=200 "
  />
  < img
    src =""
    alt =" Row 02, col 02 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_02&amp;w=200&amp;h=200 "
  />
  <!-- ... -->
</ div >

skrip java

 var lazyLoadInstances = [ ] ;

var initOneLazyLoad = function ( horizContainerElement ) {
  // When the .horizContainer element enters the viewport,
  // instantiate a new LazyLoad on the horizContainerElement
  var oneLL = new LazyLoad ( {
    container : horizContainerElement
  } ) ;
  // Optionally push it in the lazyLoadInstances
  // array to keep track of the instances
  lazyLoadInstances . push ( oneLL ) ;
} ;

// The "lazyLazy" instance of lazyload is used to check
// when the .horizContainer divs enter the viewport
var lazyLazy = new LazyLoad ( {
  elements_selector : ".horizContainer" ,
  callback_enter : initOneLazyLoad ,
  unobserve_entered : true // Stop observing .horizContainer(s) after they entered
} ) ;

Itu saja. Setiap kali elemen .horizContainer memasuki viewport, LazyLoad memanggil fungsi initOneLazyLoad , yang membuat instance baru LazyLoad pada elemen .horizContainer .

DEMO - SUMBER - API

Suka proyek ini? ? Belikan aku kopi!

Demo

Tidak menemukan resep yang sesuai dengan kebutuhan Anda? Kami memiliki demo!

Folder demo berisi 30+ kasus penggunaan vanilla-lazyload. Anda mungkin menemukan apa yang Anda cari di sana.

Jenis	Judul	Kode	Demo
Isi	Gambar sederhana yang dimuat dengan lambat, tidak menggunakan placeholder apa pun	Kode	Hidup
Isi	Gambar malas yang menggunakan SVG sebaris sebagai pengganti	Kode	Hidup
Isi	Gambar malas yang menggunakan file SVG eksternal sebagai pengganti	Kode	Hidup
Isi	Gambar responsif yang malas dengan `srcset`	Kode	Hidup
Isi	Gambar lambat responsif dengan tag `<picture>` dan atribut `media` (arahan seni)	Kode	Hidup
Isi	Gambar responsif yang lambat dengan `srcset` dan `sizes` (menggunakan `data-sizes` )	Kode	Hidup
Isi	Gambar responsif yang malas dengan `srcset` dan `sizes` (menggunakan `sizes` biasa)	Kode	Hidup
Isi	Video malas dengan beberapa tag `<source>` , opsi pramuat berbeda, TANPA putar otomatis	Kode	Hidup
Isi	Video malas dengan beberapa tag `<source>` , opsi pramuat berbeda, DENGAN putar otomatis	Kode	Hidup
Isi	Lambat memuat gambar latar belakang	Kode	Hidup
Isi	Malas memuat banyak gambar latar belakang	Kode	Hidup
Isi	Malas memuat gambar latar belakang dengan `image-set()`	Kode	Hidup
Isi	Lambat memuat iframe	Kode	Hidup
Isi	Malas memuat file SVG dan PDF animasi	Kode	Hidup
Isi	Gambar WebP malas dengan tag `<picture>` dan atribut `type` untuk WebP	Kode	Hidup
Memuat	Memuat LazyLoad secara asinkron dengan `<script async>`	Kode	Hidup
Memuat	Memuat secara asinkron beberapa instance LazyLoad dengan `<script async>`	Kode	Hidup
Kesalahan	Uji perilaku pemuatan kesalahan ketika `restore_on_error` `false`	Kode	Hidup
Kesalahan	Uji perilaku pemuatan kesalahan ketika `restore_on_error` `true`	Kode	Hidup
Teknik	Memudarkan gambar saat dimuat	Kode	Hidup
Teknik	Lambat memuat gambar dalam penggeser horizontal khusus CSS (gaya Netflix)	Kode	Hidup
Teknik	Buat instance Swiper dengan malas dan muat gambar Swiper dengan malas	Kode	Hidup
Teknik	Jalankan fungsi dengan malas saat elemen tertentu memasuki area pandang	Kode	Hidup
Teknik	Bagaimana mengelola pencetakan halaman dengan gambar yang malas	Kode	Hidup
Teknik	Lapisan popup yang berisi gambar malas dalam wadah bergulir	Kode	Hidup
Pengaturan	Beberapa wadah bergulir	Kode	Hidup
Pengaturan	Wadah bergulir tunggal	Kode	Hidup
Metode	Cara `restore()` DOM ke keadaan semula, dan/atau `destroy()` LazyLoad	Kode	Hidup
Metode	Menambahkan konten dinamis, lalu `update()` LazyLoad	Kode	Hidup
Metode	Menambahkan konten dinamis, lalu `update()` LazyLoad meneruskan elemen NodeSet	Kode	Hidup
Metode	Muat gambar tepat waktu menggunakan metode `load()`	Kode	Hidup
Metode	Muat semua gambar sekaligus menggunakan `loadAll()`	Kode	Hidup
Tes	Uji beberapa ambang batas	Kode	Hidup
Tes	Uji perilaku dengan gambar tersembunyi	Kode	Hidup
Tes	Uji kinerja, pemuatan ratusan gambar yang lambat	Kode	Hidup
Warga asli	Uji pemuatan lambat gambar asli TANPA baris javascript apa pun, bahkan skrip ini pun tidak	Kode	Hidup
Warga asli	Uji pemuatan lambat gambar asli secara kondisional menggunakan opsi `use_native` (lihat API)	Kode	Hidup

Suka proyek ini? ? Belikan aku kopi!

? Tip & trik

Memperluas

vanilla lazyload

?‍ Memulai - HTML

Gambar malas:

Gambar malas dengan placeholder berkualitas rendah:

Gambar responsif yang malas dengan srcset dan sizes :

Gambar responsif lambat dengan dukungan hi-dpi menggunakan tag picture :

Gambar responsif lambat dengan pemilihan format WebP otomatis, menggunakan tag picture :

Gambar latar belakang malas

Gambar latar belakang tunggal:

Latar belakang tunggal, dengan dukungan layar HiDPI:

Berbagai latar belakang:

Berbagai latar belakang, dukungan layar HiDPI:

Latar belakang dengan image-set :

Berbagai latar belakang dengan image-set :

SVG animasi malas

Video malas

Iframe malas

?‍ Memulai - Skrip

Cara yang sederhana dan termudah

Menggunakan skrip async

Menggunakan skrip async + mendapatkan referensi instance

Pemasangan lokal

Menggunakan npm

Menggunakan punjung

Unduhan manual

Penggunaan lokal

Penggunaan dengan React

bundel

? Resep

Sembunyikan teks alternatif dan gambar kosong

Penanganan kesalahan gambar

Konten dinamis

Campuran pemuatan lambat berbasis asli dan JS

Panel gulir

Fungsi malas

Inisialisasi lambat pada beberapa instance LazyLoad

Demo

? Tip & trik

Gambar responsif yang malas dengan `srcset` dan `sizes` :

Gambar responsif lambat dengan dukungan hi-dpi menggunakan tag `picture` :

Gambar responsif lambat dengan pemilihan format WebP otomatis, menggunakan tag `picture` :

Latar belakang dengan `image-set` :

Berbagai latar belakang dengan `image-set` :

Menggunakan skrip `async`

Menggunakan skrip `async` + mendapatkan referensi instance