Adakah `display:none` Benar-benar Menghalang Pemuatan Imej?

Kesan "display:none" pada Pemuatan Imej

Banyak tutorial pembangunan tapak web responsif mencadangkan menggunakan sifat CSS "display:none" untuk menyembunyikan kandungan daripada dipaparkan pada penyemak imbas mudah alih, dengan itu mempercepatkan masa memuatkan laman web. Walau bagaimanapun, adakah "display:none" benar-benar menghalang imej daripada dimuatkan?

Adakah "display:none" Menghentikan Pemuatan Imej?

Penyemak imbas telah menjadi lebih canggih. Hari ini, bergantung pada versinya, penyemak imbas anda mungkin mengelak daripada memuatkan imej jika ia menentukan ketakkaitannya.

Walaupun imej mungkin mempunyai gaya "display:none" yang ditetapkan, dimensinya masih boleh diakses oleh skrip. Dalam kes di mana unsur induk disembunyikan, Chrome versi 68.0 mengetepikan pemuatan imej.

Alternatif kepada "display:none"

Jika anda secara khusus mahu menghalang pemuatan imej, pertimbangkan teknik berikut:

• Abaikan elemen IMG daripada dokumen.
• Tetapkan atribut IMG src kepada "data:" atau "about:blank."

Penghadan "display:none"

"paparan: tiada" mungkin tidak berkesan untuk imej yang dipaparkan pada skrin awal dan tidak dimuatkan secara malas. Imej akan dimuatkan tetapi tidak akan kelihatan.

Atas ialah kandungan terperinci Adakah `display:none` Benar-benar Menghalang Pemuatan Imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!