Adakah `display:none` Benar-benar Menghentikan Imej daripada Dimuatkan?

Bolehkah "display:none" menghalang Pemuatan Imej?

Dalam reka bentuk web responsif, menyembunyikan kandungan yang tidak diperlukan pada penyemak imbas mudah alih untuk meningkatkan prestasi ialah satu amalan biasa. Satu pendekatan melibatkan penggunaan sifat CSS "display:none". Adakah kaedah ini sememangnya menghalang pemuatan imej, atau adakah kandungan masih diambil walaupun telah disembunyikan?

Jawapan:

Pelayar moden telah menjadi lebih bijak dalam pengurusan sumber mereka. Bergantung pada penyemak imbas dan versi, pemuatan imej mungkin dihentikan jika ia dianggap tidak penting.

Khususnya, penyemak imbas seperti Chrome v68.0 mengesan unsur induk tersembunyi dan melangkau pemuatan imej dengan sewajarnya. Tingkah laku ini boleh disahkan melalui alatan pembangun penyemak imbas dengan memeriksa tab "rangkaian".

Walau bagaimanapun, jika imej dipaparkan pada skrin pertama tanpa memuatkan malas, "display:none" mungkin tidak menghalang pemuatan sepenuhnya, walaupun ia akan menyembunyikan imej daripada pandangan.

Alternatif untuk Menghalang Imej Memuatkan:

Untuk mengelakkan pemuatan kandungan yang tidak diperlukan sepenuhnya, pertimbangkan alternatif berikut:

• Abaikan elemen IMG: Cuma elakkan menambah elemen IMG pada dokumen HTML.
• Tetapkan sumber imej kepada "data:" atau "about:blank": Nilai ini tidak mencetuskan pemuatan imej.

Ingat bahawa "display:none" hanya mempengaruhi keterlihatan dan tidak menghalang pengambilan kandungan sepenuhnya. Untuk pengoptimuman prestasi sebenar, teroka kaedah alternatif yang dinyatakan di atas.

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