5 Contoh Aplikasi Sederhana untuk Belajar Vue.js

Terlalu banyak reflow yang terjadi pada website dapat membuat website tersebut kurang nyaman dilihat. Penyebab reflow adalah karena adanya perubahan di DOM, salah satunya ketika gambar selesai dimuat.

IKLAN
IKLAN

Fixed width dan height

Cara paling mudah untuk menghindari reflow gambar adalah dengan memberi nilai pada atribut width dan height pada elemen 'img' dengan nilai sesuai dengan dimensi gambar.

<img src="http://anakbit.com/contoh.jpg" width="600" height="400" />

Dengan menentukan height dan width, browser akan menyediakan ruang kosong sebesar atribut width dan height tersebut, yang kemudian akan ditempati oleh gambar ketika selesai dimuat. Sayangnya, dengan cara ini kita harus mengetahui dengan tepat height dan width dari gambar yg akan dimuat. Dan cara ini tidak untuk website responsive yang ukuran lebarnya sangat variatif tergantung dari lebar viewport.

Fixed Ratio

Cara lainnya adalah dengan menggunakan aspect ratio yang dimiliki gambar. Aspect ratio pada sebuah gambar adalah hubungan proporsional antara tinggi dan lebar gambar tersebut. Dan biasanya, gambar-gambar yang kita gunakan pada website itu memiliki satu atau beberapa aspect ratio yang seragam, walaupun tinggi dan lebar mereka berbeda-beda. Jadi kita bisa gunakan aspect ratio ini untuk menyediakan ruang kosong yang akan digunakan untuk memuat gambar.

Tapi aspect ratio saja tidak cukup, kita juga butuh suatu patokan untuk menghitung tinggi dan lebar yang diperluka ruang kosong tersebut. Sudah disebutkan sebelumnya bahwa website responsive memiliki lebar viewport yang variatif, nah kita bisa pakai lebar viewport ini (atau lebar container) sebagai patokan untuk menghitung besarnya ruang kosong tadi.

Misalnya aspect ratio gambarnya 6:4 dan lebar viewportnya 500px, berarti besar ruang kosong tersebut adalah 500px:( (500/6) * 4 ) = 500px:333.33px

Lalu untuk implementasinya kita bisa menggunakan nilai tinggi diatas (333.33px) sebagai padding-bottom elemen ruang kosong. Untungnya isi dari padding-bottom itu bisa berupa persentase, yaitu persentase dari lebar viewport atau container. Sehingga kita bisa gunakan 4/6 * 100% atau 66.66% sebagai isi dari padding-bottom.

Markupnya menjadi seperti ini:

<div class="fixed-ratio fixed-ratio--6x4">
  <img src="http://anakbit.com/contoh.jpg" alt="Contoh" class="fixed-ratio--object" />
</div>

Kemudian style nya seperti ini:

.fixed-ratio {
    height: 0;
    position: relative;
}

.fixed-ratio--6x4 {
    padding-bottom: 66.66%;
}

.fixed-ratio--object {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}