Membuat Lazy Image dengan Jquery

Hallo kawan..

Selamat datang di situs GRAD Information, pada kesempatan kali ini saya akan memberikan cara membuat fungsi lazy image dengan jquery kawan.

Bagi kalian yang belum tahu, fungsi lazy adalah fungsi untuk meload tag '<...>' pada halaman website.

Fungsi lazy ada dua yaitu lazy on click yang mana tag akan diload saat mengeklik sesuatu. 

Dan lazy on scroll yang mana proses loadnya itu terjadi apabila posisi scroll sudah mencapai tag tersebut.

Kemudian untuk lazy load image disini saya menggunakan fungsi lazy on scroll, karena lebih SEO friendly J

Ok, daripada kelamaan mending simak langkah-langkahnya sebagai berikut:

1. Masuk ke akun blogger kalian.

2. Pilih menu 'tema' dan klik tanda '▼' lalu pilih 'edit html'

3. Pastikan sudah terdapat 'jquery' dalam template kalian.

4. Jika tidak ada, tempel saja kode berikut tepat diatas tag '</head>'

<!-- ini adalah contoh library jquery --> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'> </script> <!-- dan letakkan di atas tag </head> ya woke --> <!-- jika sudah ada jquery, skip aja kode ini -->

5. Oh iya, jangan lupa salin kode 'javascript' berikut:

<!-- lazy load img jquery --> <script async='async'>//<![CDATA[ $(window).scroll(function() {$.each($('img'), function() {if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {var source = $(this).data('src');$(this).attr('src', source);$(this).removeAttr('data-src');}}) }) //]]> </script> <!-- tempel dibawah code jquery atau </body> -->

6. Lalu letakkan di atas tag '</body>' atau dibawah code 'jquery' tadi.

7. Ok, kita telah menyelesaikan fiturnya. Dan sekarang mulai penerapannya.

8. Penerapannya cukup membuat tag '<img data-src="link" src="#kosongin" />'

9. Lalu masukan 'link image' kedalam atribut 'data-src' seperti beriut:

10. Untuk atribut 'src' kosongkan saja atau isi dengan text '#kosongin'.

11. Kemudian agar efek transisinya bagus, kalian salin kode 'css' berikut:

/*kode css untuk transisi lazy img*/ .lazy-color{background-color:#C3DDE8;} .border-gambar{border:2px solid #666;} img {opacity: 1;transition: all 700ms ease-out;min-height:30px;}/*margin: 0.7em 3px 0.7em 3px;*/ img.respon,img.custom{background: silver;border:2px solid transparent;min-width:20px;} img.respon:hover,img.custom:hover{border:2px solid #888;box-shadow: 0px 8px 6px -6px #2874A6;} img[data-src] {opacity: 0;width:10%;} img.respon[src]{width:97%;}

12. Lalu letakkan kode 'css' diatas tag '</style>' atau '</b:skin>'

13. Berikutnya yaitu tambahkan 'class' pada tag '<img>' nya seperti berikut:

14. Pilihan 'class' ada 2 yaitu 'respon' dan 'custom', untuk perbedaannya bisa cek sendiri.

15. Dan selesai.

Untuk 'demo' kalian sudah melihat proses load gambar diatas . Apabila kalian masih bingung, kalian bisa memberikan komentar dibawah ini. Dan saya biasanya fastrespon J.

Ok, itu adalah akhir cerita saya pada hari ini. Dan sebelum kalian meninggalkan artikel ini, saya ingin kalian untuk 'follow' akun sosial media saya serta jangan lupa klik 'like', 'subscribe' dan 'share' kawan.

Sekian dari saya dan terima kasih J.

---

Share :Wa FbTwLkTgTmPr Ln

Related Post: