Dengan cekap melaksanakan pemuatan malas gambar laman web: Mengambil kira kedua -dua respons dan prestasi

Pernahkah anda menganggap pemuatan malas imej untuk mengoptimumkan prestasi laman web? Teknologi pemuatan malas dapat mengurangkan berat beban halaman awal dan meningkatkan kelajuan pemuatan laman web. Artikel ini akan meneroka kaedah pemuatan malas imej yang cekap, sambil mengambil kira imej responsif dan pengalaman pengguna yang terbaik.

Pemuatan malas bukan fungsi penyemak imbas, dan kini perlu dilaksanakan dengan bantuan JavaScript. Walaupun Chrome 75 dan versi berikutnya merancang untuk menyokong pemuatan malas imej dan iframes, kita masih perlu menggunakan penyelesaian JavaScript untuk bersesuaian dengan pelayar lain. Banyak penjana laman web statik, perpustakaan, dan rangka kerja menyediakan keupayaan pemuatan malas dari kotak, tetapi memperkenalkan perpustakaan atau rangka kerja penuh hanya untuk melaksanakan fungsi ini boleh menyebabkan overhead prestasi. Oleh itu, kami memilih untuk melaksanakan pemuatan malas oleh diri kita sendiri.

Mekanisme Teras:

Kaedah pemuatan yang paling malas mengikuti corak berikut:

1. HTML Tags: Gunakan <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174502705448368.jpg" class="lazy" alt="Petua untuk melancarkan pemuatan malas anda sendiri">

2. Masa Memuatkan: Gunakan API Intersection Observer untuk mengesan sama ada imej memasuki Viewport. Intersection Observer menyediakan pengesanan penglihatan elemen yang cekap, mengelakkan kerap scroll dan resize acara mendengar.

 // Buat pemerhati persimpangan
Const Observer = New IntersectionObserver (Lazyload, {
  rootmargin: '100px',
  Ambang: 1.0
});

Fungsi Lazyload (Elements) {
  elements.foreach (image => {
    jika (image.intersectionRatio> 0) {
      image.src = image.dataset.src;
      Observer.unobserve (imej);
    }
  });
}

// Perhatikan semua elemen IMG dengan kelas "malas" const lazyImages = document.QuerySelectorAll ('img.lazy');
LazyImages.Foreach (img => {
  Observer.observe (IMG);
});

Penambahbaikan dan Pengoptimuman:

Terdapat beberapa kekurangan dalam kaedah asas di atas:

1. Ketergantungan JavaScript: Imej tidak dapat dipaparkan sehingga JavaScript dimuatkan dan dilaksanakan.
2. Pukulan Visual: Halaman kosong sebelum gambar dimuatkan, yang boleh menyebabkan ketidakpuasan visual.

Sebagai tindak balas kepada isu -isu di atas, kami telah membuat penambahbaikan berikut:

1. Pengesanan beban malas asli: Gunakan pengesanan ciri untuk menentukan sama ada penyemak imbas menyokong atribut loading="lazy" . Jika disokong, gunakan secara langsung tanpa campur tangan JavaScript.

 jika ('memuat' dalam htmlimageelement.prototype) {
  document.QuerySelectorAll ('img.lazy'). foreach (img => img.src = img.dataset.src);
} else {
  // Gunakan pemerhati persimpangan untuk melaksanakan pemuatan malas}

2. Peta Pemegang Tempat dan Peralihan CSS: Gunakan peta letak kecil bersaiz kecil sebagai keadaan awal, dan gunakan CSS untuk skala dan kabur, keluarkan kesan kabur selepas imej dimuatkan untuk mencapai peralihan yang lancar.

<picture>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174502705554652.jpg" class="lazy" alt="Petua untuk melancarkan pemuatan malas anda sendiri">
</picture>

gambar {lebar: 100%; Limpahan: Tersembunyi; }
gambar img {lebar: 100%; Peralihan: Penapis 0.5s; }
gambar.lazy img {filter: blur (20px); }

3. Gambar responsif: Gunakan<picture></picture> Unsur dan<source></source> Unsur -unsur melaksanakan gambar responsif, memuat gambar saiz yang berbeza mengikut saiz paparan yang berbeza.

Alat Auxiliary:

Untuk memudahkan proses pembangunan, kita boleh menggunakan alat tambahan berikut:

1. Penjana HTML: Fungsi tersuai atau enjin templat dibantu dalam generasi<picture></picture> Kod HTML untuk elemen.

2. Pemprosesan Batch Imej: Gunakan alat seperti gulp-image-resize untuk menjana gambar saiz yang berbeza, atau gunakan perkhidmatan awan (seperti netlify dan cloudinary) untuk menukar gambar atas permintaan.

Meringkaskan:

Artikel ini memperkenalkan kaedah pelaksanaan pemuatan malas imej yang cekap. Dengan menggabungkan pengesanan ciri pemuatan malas asli, peta pemegang tempat, peralihan CSS, gambar responsif dan alat tambahan, ia dapat meningkatkan pengalaman pengguna sambil memastikan prestasi. Memilih kaedah pemprosesan imej yang betul (membina atau penukaran atas permintaan) bergantung kepada saiz dan keperluan projek. Kaedah ini dapat meningkatkan kelajuan pemuatan halaman web dan memberikan kesan visual yang lebih lancar.

Atas ialah kandungan terperinci Petua untuk melancarkan pemuatan malas anda sendiri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!