Gambar Terbang adalah plugin pemuatan malas berkinerja tinggi.

Bagaimana cara kerja pemuatan malas?

Gambar HTML normal terlihat seperti ini:

<img src="sample.jpg" width="100%"/>

Plugin pemuatan malas menulis ulang kode seperti ini:

<img data-src="sample.jpg" width="100%"/>

Seperti yang Anda perhatikan,srcatribut telah diubah menjadidata-src.

Karena tidaksrc, browser pada awalnya tidak memuat gambar ini. Kemudian, sedikit kode JavaScript memeriksa apakah gambar ada di area pandang (area pandang pengguna), dan apakah ada di dalam,data-srckembali ke itusrcbrowser mana yang memicu unduhan dan tampilan gambar.

Apa itu pemuatan malas asli?

Chrome hadir dengan "pemuatan malas asli". Anda dapat membacanya di sini.

Pemuatan malas asli memiliki keuntungan bahwa tidak ada kebutuhan untuk JavaScript dan umumnya jauh lebih cepat karena browser melakukannya "asli".

Kodenya terlihat seperti ini:

<img src="sample.jpg" loading="lazy" width="100%"/>

Apa itu gambar terbang?

Gambar Terbang adalah plugin pemuatan malas berkinerja tinggi. Ini menggunakan pemuatan lambat "asli" browser jika tersedia, jika tidak, gunakan JavaScript biasa untuk pemuatan lambat.

Gambar Terbang juga dapat memuat gambar bahkan sebelum gambar muncul di viewport.

Apakah Anda takut dengan pemuatan lambat karena mengganggu pengalaman pengguna?

Bagaimana gambar terbang berbeda dari plugin pemuatan malas lainnya?

• Menggunakan pemuatan malas bawaan - gunakan pemuatan lambat bawaan jika tersedia (saat ini hanya didukung di Chrome), jika tidak, gunakan JavaScript untuk pemuatan lambat gambar.
• Muat gambar sebelum memasuki viewport - sementara plugin lain memuat gambar ketika mereka "di dalam" viewport, gambar terbang memuatnya ketika mereka akan memasuki viewport.
• JavaScript kecil - hanya 0,5 KB, dikompresi, dikurangi.
• Jika diinginkan, Anda hanya dapat menggunakan yang asli – hanya ingin mendukung Chrome? Anda dapat beralih ke "hanya asli", yang tidak menyuntikkan JavaScript.
• Menulis ulang semua kode HTML - tidak pernah melewatkan gambar karena pemuatan yang lambat (bahkan jika itu ditambahkan oleh plugin galeri).
• Pengisi transparan - base64 transparan kecil ditambahkan ke semua gambar. Tidak ada lagi kedipan saat memuat gambar.
• Kecualikan kata kunci - Hampir semua plugin lazy loading menyediakan fitur pengecualian, namun gambar terbang juga dapat mengecualikan gambar dari node induk gambar. Berguna jika gambar Anda tidak memiliki nama kelas.
• Mendukung browser dengan IE dan JavaScript dinonaktifkan - semua gambar dimuat secara instan jika itu adalah Internet Explorer atau bahkan jika JavaScript sepenuhnya dinonaktifkan (menggunakannoscriptmenandai).