Adakah `display:none` Menghalang Pemuatan Imej dalam Penyemak Imbas Moden?

Menyingkap Kesan "display:none" pada Pemuatan Imej

Penyokong reka bentuk web responsif sering bergantung pada CSS "display:none" harta untuk meningkatkan pengalaman penyemakan imbas mudah alih. Walau bagaimanapun, persoalan penting timbul: adakah sifat ini menghalang imej daripada dimuatkan, atau adakah ia masih mengambilnya di latar belakang?

Kebenaran Didedahkan: Pelayar Berkembang

Pada mulanya , menetapkan "paparan" imej kepada "tiada" akan menyembunyikannya tanpa menjejaskan pemuatannya. Walau bagaimanapun, pelayar moden telah menjadi lebih pintar. Mereka kini boleh mengesan apabila imej tidak diperlukan untuk bahagian halaman yang kelihatan dan melangkau pemuatannya.

Chrome, khususnya, mempunyai keupayaan untuk menghalang pemuatan imej jika elemen induk imej itu disembunyikan. Tingkah laku ini boleh diperhatikan di sini: http://jsfiddle.net/tnk3j08s/.

Pendekatan Alternatif untuk Mencegah Pemuatan

Jika anda bertujuan untuk menghalang pemuatan imej sepenuhnya , pertimbangkan alternatif ini:

• Mengalih keluar IMG Elemen: Hanya kecualikan elemen IMG daripada dokumen.
• Mengubah suai Sumber IMG: Kemas kini atribut src IMG kepada "data:" atau "about:blank" untuk mengelakkan perkara sebenar pengambilan imej.

Penting Nota

Untuk strategi di atas berfungsi dengan berkesan, imej anda tidak boleh kelihatan pada skrin awal dan tidak boleh dimuatkan dengan malas. Jika syarat ini tidak dipenuhi, imej mungkin masih dimuatkan tetapi tersembunyi.

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