Flying Images ialah pemalam pemuatan malas berprestasi tinggi.

Bagaimanakah pemuatan malas berfungsi?

Imej HTML biasa kelihatan seperti ini:

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

Pemalam memuatkan malas menulis semula kod seperti ini:

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

Seperti yang anda perhatikan,srcatribut telah ditukar kepadadata-src.

Sebab tidaksrc, pelayar tidak memuatkan imej ini pada mulanya. Kemudian, sedikit kod JavaScript menyemak sama ada imej berada dalam port pandangan (port pandangan pengguna), dan jika ia berada di dalam,data-srckembali kepada itusrcpelayar manakah yang mencetuskan muat turun dan paparan imej.

Apakah pemuatan malas asli?

Chrome disertakan dengan "pemuatan malas asli". Anda boleh membaca mengenainya di sini.

Pemuatan malas asli mempunyai kelebihan yang tidak memerlukan JavaScript dan secara amnya lebih pantas kerana penyemak imbas melakukannya "secara asli".

Kod kelihatan seperti ini:

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

Apakah imej terbang?

Flying Images ialah pemalam pemuatan malas berprestasi tinggi. Ia menggunakan pemuatan malas "asli" penyemak imbas jika tersedia, jika tidak gunakan JavaScript biasa untuk pemuatan malas.

Imej Terbang juga boleh memuatkan imej sebelum imej itu muncul dalam port pandangan.

Adakah anda takut malas memuatkan kerana ia menyakitkan pengalaman pengguna?

Bagaimanakah imej terbang berbeza daripada pemalam memuatkan malas yang lain?

• Menggunakan pemuatan malas terbina dalam - gunakan lazy loading terbina dalam jika tersedia (kini hanya disokong dalam Chrome), jika tidak gunakan JavaScript untuk malas memuatkan imej.
• Muatkan imej sebelum memasuki ruang pandang - semasa pemalam lain memuatkan imej apabila ia berada "di dalam" port pandangan, imej terbang memuatkannya apabila ia akan memasuki port pandangan.
• JavaScript kecil - hanya 0.5 KB, dimampatkan, dikurangkan.
• Jika dikehendaki, anda boleh menggunakan hanya asli – mahu menyokong Chrome sahaja? Anda boleh bertukar kepada "asli sahaja", yang tidak menyuntik JavaScript.
• Menulis semula semua kod HTML - jangan sekali-kali terlepas imej kerana malas memuatkan (walaupun ia ditambah oleh pemalam galeri).
• Pengisi lutsinar - base64 lutsinar kecil ditambah pada semua imej. Tiada lagi kelipan apabila memuatkan imej.
• Kecualikan kata kunci - Hampir semua pemalam memuatkan malas menyediakan ciri pengecualian, namun imej terbang juga boleh mengecualikan imej daripada nod induk imej. Berguna jika imej anda tidak mempunyai nama kelas.
• Menyokong pelayar dengan IE dan JavaScript dilumpuhkan - semua imej dimuatkan serta-merta jika ia adalah Internet Explorer atau walaupun JavaScript dilumpuhkan sepenuhnya (menggunakannoskriptag).