Bagaimana jika kita mendapat imej bersaiz nisbah aspek dengan melakukan hampir apa-apa?

Selesaikan Gagasan Memuat Imej: Gunakan ciri -ciri asli penyemak imbas untuk mencapai paparan imej yang lancar

Pernahkah anda menemui situasi di mana imej laman web memuat perlahan -lahan, menyebabkan halaman itu gagap? Ini biasanya kerana penyemak imbas tidak mengetahui nisbah aspek imej, jadi ia tidak dapat menempah ruang yang cukup untuk memaparkan imej. Artikel ini akan meneroka penyelesaian yang elegan yang mengambil kesempatan daripada ciri -ciri asli penyemak imbas untuk menyelesaikan masalah ini tanpa banyak kod tambahan.

Katakan anda menggunakan imej 800x600 piksel dalam laman web dan tetapkan lebarnya ke width: 100%; . Lebar paparan sebenar imej akan berbeza -beza mengikut saiz kontena, tetapi nisbah aspeknya tetap sama. Masalahnya ialah penyemak imbas tidak dapat menentukan ketinggian imej sebelum imej dimuatkan, yang akan menyebabkan halaman itu gagap.

Penyelesaian: Ambil kesempatan daripada sifat width dan height

Anehnya, hanya <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174511723380054.jpg" class="lazy" alt="Bagaimana jika kita mendapat imej bersaiz nisbah aspek dengan melakukan hampir apa-apa?"> Melangkah lebih jauh: Sokongan Gaya Asli Pelayar

Penyelesaian yang lebih ideal adalah untuk menjadikan penyemak imbas itu sendiri menyokong ciri ini. Salah satu cara adalah untuk memanfaatkan atribut aspect-ratio CSS, tetapi ini memerlukan pemaju untuk menambahnya secara manual, yang tidak cukup mudah. Penyelesaian yang lebih baik adalah untuk menambah tetapan nisbah aspek lalai ke stylesheet ejen pengguna pelayar, sebagai contoh:

 IMG, video {
  aspek nisbah: attr (lebar) / attr (ketinggian);
}

Dengan cara ini, selagi imej mempunyai atribut width dan height , penyemak imbas secara automatik boleh mengira dan menempah ruang yang betul untuk mengelakkan lag beban.

Kelebihan pendekatan ini adalah:

1. Mudah difahami dan dilaksanakan: Tidak perlu mempelajari atribut baru atau helah CSS yang kompleks.
2. Kebolehgunaan yang luas: Banyak laman web sudah menggunakan atribut width dan height tanpa mengubah kod sedia ada.
3. Pemaju Mesra: Pemaju baru dan lama dapat memahami dan menggunakannya dengan mudah.

Pada masa ini, beberapa pelayar sedang menguji kemungkinan penyelesaian ini. Ini akan memudahkan pembangunan web dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana jika kita mendapat imej bersaiz nisbah aspek dengan melakukan hampir apa-apa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!