Adakah `display:none` Benar-benar Menghentikan Imej daripada Dimuatkan pada Peranti Mudah Alih?

Pengoptimuman CSS: Adakah "display:none" Benar-benar Menghalang Pemuatan Imej?

Adakah sifat CSS "display:none" berkesan menghalang imej daripada dimuatkan pada peranti mudah alih untuk meningkatkan kelajuan tapak web?

Walaupun reka bentuk tapak web responsif mengesyorkan menggunakan "display:none" untuk menyembunyikan kandungan daripada penyemak imbas mudah alih, keberkesanannya dalam menghalang pemuatan imej masih tidak jelas.

Jawapan:

Gelagat Penyemak Imbas:

Teknologi penyemak imbas semasa membenarkan pengendalian pintar sifat CSS. Jika penyemak imbas mengesan bahawa imej dengan "display:none" tidak diperlukan, ia mungkin melangkau proses pemuatan.

Metadata Imej:

Walaupun dengan "paparan: tiada" digunakan, saiz imej dan metadata lain masih boleh diakses oleh skrip, menunjukkan bahawa beberapa pemuatan mungkin masih berlaku.

Gelagat Khusus Penyemak Imbas:

Chrome версии 68.0 dan ke atas telah diperhatikan untuk mengelakkan pemuatan imej jika elemen induk disembunyikan menggunakan "display:none."

Alternatif Penyelesaian:

Jika menghalang pemuatan adalah penting, kaedah alternatif termasuk:

• Mengalih keluar elemen daripada dokumen
• Menetapkan atribut src kepada "data:" atau "about:blank"

Limitation:

"display : none" tidak menghalang pemuatan imej jika imej muncul pada skrin pertama tanpa memuatkan malas. Dalam senario ini, imej akan dimuatkan tetapi kekal tersembunyi.

Atas ialah kandungan terperinci Adakah `display:none` Benar-benar Menghentikan Imej daripada Dimuatkan pada Peranti Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!