# 052: Galeri Pemuatan Halus, Bagian 2 - Trik CSS

Daftar Isi

Di mana kami mencari tahu masalah yang kami hadapi dengan membuat tata letak kolom dimuat dengan baik. Perbaikannya adalah menghapus CSS yang membuat kotak placeholder tetap rasio aspek berfungsi setelah gambar dimuat (yang menahan rasio aspek dengan sendirinya). Kemudian terapkan kelas CSS untuk membuat "fade in" berfungsi (mengubah opasitas dari 0 menjadi 1). Mudah murahan dan hanya sedikit JavaScript.

Perlu dicatat bahwa pada versi live situs sayangnya teknik keren ini tidak akan berfungsi. Agar benar-benar efektif, kita perlu mengetahui rasio aspek dari sisi server gambar, kita dapat membuat kisi secara instan dengan placeholder yang benar. Sayangnya kami tidak memiliki informasi yang tersedia untuk kami di galeri yang sebenarnya. Kita bisa menggunakan PHP untuk mendapatkan dimensinya, tapi sangat lambat. Sebagai gantinya, kami menunggu semua gambar dimuat dan kemudian memudar dalam opasitasnya. Tidak sekeren dan sedikit lebih lambat, tapi setidaknya memuat lebih sedikit janky-ness.

Artikel yang menarik...