08

CSS HTML LAZY LOAD, MEMBUAT CSS LAZY LOAD SEDERHANA

Banyak yang beranggapan untuk menggunakan lazy load itu harus dengan plugin atau dengan tool yang lainny, mengapa saya bilang seperti itu, sebelum membahas cara membuat dan penerapannya kita harus tau dulu apa fungsi dari lazy load itu sendiri.
lazy load berfungsi untuk mengganti sementara tampilan website kita sebelum semua element di dalam website kita terbuka secara sempurna, katalain lazy load adalah tampilan sementara di awal pembukaan halaman website.
kenapa demikian, karena dalam audit website kita melihat skor FCP First Contentfull Paint. yang bisa kita simpulkan bahwa pada saat pertama membuka halaman yang terlihat halaman kosong dan tidak terlihat bentuk website kita,
lalu fungsi dari lazy load ini di gunakan memberikan layout pada halaman kita meskipun kosong tetapi terlihat bentuk dari susunan halaman kita dengan memberi efek yang membentuk seperti blok blok pada website kita.
jika kita melihat website besar seperti disini saya contohkan youtube pada saat kita pertama kali membuka halaman akan terlihat hanya sebuat layout kosong tanpa ada isiny, nah seperti itulah fungsi lazy load itu.
oke sekarang kita akan mencoba membuat lazy load sendiri dengan menggunakan css caranya cukup mudah .lazy-load{ -webkit-animation: lazy 2s linear infinite; animation: lazy 2s linear infinite; } .lazy-laod > *{visibility:hidden;color:transparent;} @keyframes lazy-load {   0% { background:rgba(0,0,0,0.05); }   10% { background:rgba(0,0,0,0.06); }   20% { background:rgba(0,0,0,0.07); }   30% { background:rgba(0,0,0,0.08); }   40% { background:rgba(0,0,0,0.09); }   50% { background:rgba(0,0,0,0.09); }   60% { background:rgba(0,0,0,0.08); }   70% { background:rgba(0,0,0,0.07); }   80% { background:rgba(0,0,0,0.06); }   90% { background:rgba(0,0,0,0.05); }   100% { background:rgba(0,0,0,0.04); } }
nah script ini menggunaka class .lazy-load lalu untuk penerapannya kita cukup dengan menambah lazy-load di setiap elemen tag pada website kita. lalu untuk menghintikan lazy load ini kita menggunakan script javascript, untuk jelasnya bisa di pelajari pada cara mengatur waktu lazy load
nah itu lah cara membuat lazy load tanpa plugin dan tool yang lain cukup mudah dan sederhana
Ditulis oleh: Admin

Tanggal: 03-08-2020 Pembaruan : 1 tahun

 

Beri nilai


 
BAGIKAN :
CSS TEXT ALIGN, PENGATURAN TEKS PADA HTML
SEO HTML TAG, HEADING UNTUK SEO SEBUAH WEBSITE
FLOATING BOX, MEMBUAT FLOATING BOX PADA WEBSITE
CSS MULTIPLE COLUMNS, MEMBUAT TULISAN KORAN

Galeri