Melaksanakan pemuatan malas asli untuk imej dalam html

Pemuatan malas asli adalah fungsi terbina dalam penyemak imbas, yang membolehkan pemuatan gambar malas dengan menambah atribut pemuatan = "malas" ke tag . 1. Ia tidak memerlukan JavaScript atau perpustakaan pihak ketiga, dan digunakan secara langsung dalam HTML; 2. Ia sesuai untuk gambar yang tidak dipaparkan pada skrin pertama di bawah halaman, galeri gambar menatal tambahan dan sumber gambar yang besar; 3. Ia tidak sesuai untuk gambar yang skrin pertama atau paparan: Tiada; 4. Apabila menggunakannya, ia harus menetapkan pemegang tempat yang sesuai untuk mengelakkan susun atur susun atur; 5. Ia harus mengoptimumkan pemuatan imej responsif dalam kombinasi dengan atribut srcset dan saiz; 6. Isu keserasian perlu dipertimbangkan. Sesetengah pelayar lama tidak menyokongnya, dan boleh digunakan untuk mengesan dan menggabungkan penyelesaian JavaScript sebagai sandaran.

Kini kebanyakan laman web menggunakan imej, dan kelajuan pemuatan imej secara langsung mempengaruhi pengalaman pengguna. Native Lazy Loading adalah ciri pelayar terbina dalam yang boleh melambatkan pemuatan imej di halaman sehingga mereka akan memasuki Viewport, dengan itu meningkatkan prestasi halaman.

Apa yang dimuatkan malas asli?

Pemuatan malas asli adalah ciri yang disediakan oleh HTML. Dengan menambah atribut loading="lazy" ke tag <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175225251530134.jpeg" class="lazy" alt="Melaksanakan pemuatan malas asli untuk imej dalam html" > , penyemak imbas secara automatik mengendalikan pemuatan malas imej. Ia tidak memerlukan JavaScript, dan tidak bergantung pada perpustakaan pihak ketiga, dan boleh dilaksanakan secara langsung di HTML.

Contohnya:

 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175225251321232.jpeg"  class="lazy"  src = "contoh.jpg" alt = "contoh gambar" loading = "malas">

Pendekatan ini berfungsi untuk penyemak imbas yang paling moden, termasuk Chrome, Edge, Firefox, dan Safari (disokong sebahagiannya). Walau bagaimanapun, perlu diperhatikan bahawa beberapa versi pelayar lama mungkin tidak menyokong mereka, dan anda perlu mempertimbangkan penyelesaian sandaran pada masa ini.

Dalam situasi apa yang sesuai untuk menggunakan pemuatan malas asli?

Tidak semua imej sesuai untuk membolehkan pemuatan malas. Situasi berikut sangat sesuai:

• Imej tidak dipaparkan pada skrin pertama di bahagian bawah halaman: seperti ilustrasi di tengah atau bawah artikel.
• Tatal Tambah di galeri gambar: Kandungan yang pengguna akan lihat hanya apabila mereka menatal ke bawah.
• Sumber Imej Besar: Imej dengan saiz yang lebih besar dan masa pemuatan yang lebih panjang lebih bernilai dimuatkan.

Senario yang tidak sesuai termasuk:

• Gambar skrin utama: Ia akan menjejaskan pengalaman pemuatan pertama.
• <img alt="Melaksanakan pemuatan malas asli untuk imej dalam html" > ditetapkan untuk display: none atau imej yang tidak dalam aliran dokumen: Tingkah laku pemuatan malas mungkin tidak dapat diramalkan.

Bagaimana menggunakan muatan malas asli dengan betul?

Ia sebenarnya sangat mudah digunakan, hanya tambah loading="lazy" ke tag <img alt="Melaksanakan pemuatan malas asli untuk imej dalam html" > . Tetapi untuk memastikan hasil yang terbaik, beberapa butiran perlu diberi perhatian kepada:

Sediakan pemegang tempat yang betul

Sekiranya imej tidak ditetapkan pada ketinggian atau lebar tetap, ia boleh menyebabkan susun atur. Adalah disyorkan untuk menetapkan ketinggian minimum untuk bekas gambar, atau menggunakan CSS untuk menentukan nisbah aspek.

Contohnya:

 img [loading = "malas"] {
  Lebar: 100%;
  ketinggian: auto;
  Min-Height: 200px;
}

Menggabungkan sifat srcset dan saiz

Jika imej anda menyokong reka bentuk responsif, ingatlah untuk menggunakannya dengan srcset dan sizes , supaya pelayar akan memilih sumber imej yang paling sesuai mengikut saiz peranti sambil mengekalkan ciri -ciri pemuatan malas.

Contoh:

 <img 
  src = "small.jpg" 
  srcset = "small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" 
  saiz = "(max-width: 600px) 480px, 800px" 
  alt = "gambar responsif" 
  Memuatkan = "malas"
>

Pertimbangkan isu keserasian

Walaupun pelayar arus perdana telah disokong, loading="lazy" akan diabaikan dalam beberapa sistem lama atau pelayar versi yang lebih rendah. Untuk keserasian yang lebih baik, anda boleh menggabungkan perpustakaan pemuatan malas JavaScript sebagai penyelesaian sandaran, atau membolehkannya hanya dalam persekitaran yang disokong.

Anda boleh menentukan sama ada ia menyokongnya melalui pengesanan ciri:

 jika ('memuat' dalam htmlimageelement.prototype) {
  // menyokong pemuatan malas asli} else {
  // Gunakan skema JS sebaliknya}

Ringkasan

Pemuatan malas asli adalah cara yang mudah dan berkesan untuk mengoptimumkan prestasi pemuatan imej. Selagi anda menggunakannya di tempat yang betul dan perhatikan keserasian dan kestabilan susun atur, anda dapat meningkatkan kelajuan pemuatan halaman dengan ketara. Pada dasarnya semua itu, tidak rumit tetapi mudah untuk mengabaikan butiran.

Atas ialah kandungan terperinci Melaksanakan pemuatan malas asli untuk imej dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!