Bagaimana untuk mengoptimumkan kelajuan akses laman web PHP melalui pemuatan imej yang malas?

Bagaimana untuk mengoptimumkan kelajuan akses laman web PHP melalui pemuatan imej yang malas?

Dengan perkembangan Internet mudah alih, semakin ramai pengguna menggunakan peranti mudah alih untuk mengakses tapak web. Walau bagaimanapun, disebabkan oleh kelajuan rangkaian peranti mudah alih yang agak perlahan, kelajuan pemuatan menjadi lebih penting. Antaranya, kelajuan memuatkan imej memberi impak yang besar kepada prestasi laman web. Untuk meningkatkan kelajuan akses laman web PHP, anda boleh mengoptimumkannya dengan memuatkan imej secara malas.

Malas memuatkan imej bermakna apabila memuatkan halaman web, hanya imej di kawasan yang boleh dilihat dimuatkan dan bukannya memuatkan semua imej sekaligus. Dengan cara ini, masa memuatkan skrin pertama akan sangat dipendekkan, sekali gus meningkatkan kelajuan akses tapak web. Berikut akan memperkenalkan cara mengoptimumkan kelajuan akses laman web PHP melalui pemuatan imej yang malas, dan memberikan contoh kod yang sepadan.

Pertama sekali, kami perlu memperkenalkan perpustakaan JavaScript yang berkaitan ke dalam fail PHP untuk melaksanakan fungsi pemuatan malas imej. Pustaka yang biasa digunakan ialah LazyLoad, yang boleh diimport melalui CDN. Tambahkan kod berikut dalam teg HTML:

<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script>

Seterusnya, kita perlu menambah atribut yang sepadan pada imej pada halaman web yang perlu dimuatkan secara malas. Simpan pemegang tempat imej dalam atribut src bagi teg dan kemudian simpan pautan imej sebenar dalam atribut data-src. Contoh kod adalah seperti berikut:

<img src="占位符图片链接" data-src="实际的图片链接" alt="图片描述">

Kemudian, kita perlu memulakan perpustakaan LazyLoad dalam JavaScript dan menghantar imej yang perlu dimuatkan secara malas. Contoh kod adalah seperti berikut:

<script>
  var lazyLoad = new LazyLoad({
    elements_selector: "img[data-src]"
  });
</script>

Akhir sekali, kita perlu mencetuskan pemuatan gambar yang malas pada masa yang betul. Cara biasa ialah meletakkan kod JavaScript di bahagian bawah halaman web untuk memastikan pemuatan malas dilakukan selepas halaman web dimuatkan. Contoh kod adalah seperti berikut:

<script>
  window.addEventListener("load", function() {
    lazyLoad.update();
  });
</script>

Melalui langkah di atas, kami berjaya melaksanakan fungsi pemuatan malas imej. Apabila pengguna melawat tapak web, hanya imej dalam kawasan yang boleh dilihat akan dimuatkan, yang meningkatkan kelajuan pemuatan halaman web.

Selain pustaka LazyLoad, terdapat juga beberapa perpustakaan lazy loading lain untuk imej, seperti Lozad.js dan Echo.js Anda boleh memilih perpustakaan yang sesuai untuk lazy loading imej mengikut keperluan tertentu.

Ringkasnya, memuatkan imej yang malas boleh mengoptimumkan kelajuan akses tapak web PHP. Dengan memuatkan imej sahaja dalam kawasan yang boleh dilihat, masa yang diperlukan untuk pemuatan pertama dapat dikurangkan dan pengalaman pengguna dipertingkatkan. Saya harap artikel ini akan membantu anda memahami kaedah pengoptimuman pemuatan imej yang malas.

Pautan rujukan:

1. [Repositori GitHub LazyLoad](https://github.com/verlok/lazyload)
2. [Lozad.js](https://github.com/ApoorvSaxena/lozad.js)
[Echo.js](https://github.com/toddmotto/echo)

Atas ialah kandungan terperinci Bagaimana untuk mengoptimumkan kelajuan akses laman web PHP melalui pemuatan imej yang malas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!