Meringankan proses loading Gambar pada Website dengan Lazyload

 1453 view     05 Februari 2017     Admin    Website 
  #Fitur     #Gambarenteng     #Lazyload     #Loadgambar     #Tips     #Trik     #Website    

Share:


Meringankan proses loading Gambar pada Website dengan Lazyload

Lazyload merupakan plugin untuk menunda pemuatan gambar di halaman web yang panjang. Gambar luar viewport (yang terlihat saat pertama dibuka di layar)  akan dimuat sebelum digulungan/scroll kebawah website. Cara semacam ini baik dipakai untuk menghemat daya load pada saat pertama kali website dibuka.

Proses lazyload yaitu menahan gambar yang keluar sebelum discroll kebawah, sehingga gambar akan muncul di download satu persatu oleh browser saat di scroll kebawah.

Menggunakan Lazyload pada halaman web yang panjang yang berisi banyak gambar besar membuat beban halaman lebih cepat. Browser akan berada dalam keadaan siap setelah memuat gambar terlihat. Dalam beberapa kasus juga dapat membantu untuk mengurangi beban server.

Lazyload  terinspirasi oleh YUI ImageLoader Utility dengan Matt Mlinac.

Bagaimana cara menggunakan?

Lazyload  tergantung pada jQuery. Termasuk mereka berdua di akhir kode HTML Anda:

<script src = "jquery.js" type = "text/javascript"></script>
<script src = "jquery.lazyload.js" type = "text/javascript"></script>

Anda harus mengubah kode HTML Anda. URL dari gambar yang sebenarnya harus dimasukkan ke dalam data atribut-asli. Ini adalah ide yang baik untuk memberikan lazyload Loaded kelas tertentu. Dengan cara ini Anda dapat dengan mudah mengontrol gambar yang keluar.

kemudian dalam kode Anda lakukan:

Menambah gambar sesuai keinginan, berikut ini merupakan cara load gambar menggunakan img src :

<img src="images/blank.jpg" data-original="images/7.jpg" class="lazy">

Dan ini merupakan cara load gambar menggunakan background :

<div class='img lazy' data-original='images/1.jpg' style='background: #ccc url(images/blank.jpg); background-size:cover; background-position:center;'></div>

Selanjutnya kode javascript yang diletakan diatas penutup body / </body>

<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({effect : "fadeIn"});// untuk dipasang di <img src='xxxx'>
$("div.lazy").lazyload({effect : "fadeIn"});// untuk dipasang sebagai background / div
});
</script>

Hal ini menyebabkan semua gambar kelas malas untuk malas dimuat.

Untuk melihat prosesnya bisa dilihat dengan klik kanan > inspect element > pilih network  > pilih img saja > refresh ulang browser. Bisa dilihat seperti gambar dibawah ini :

ceknetwork

 

Download
 

Lisensi

Semua kode dilisensikan di bawah lisensi MIT. Semua gambar dibawah lisensi Creative Commons Attribution 3.0 Unported. Dengan kata lain Anda pada dasarnya bebas untuk melakukan apapun yang Anda inginkan. Hanya tidak menghapus nama saya dari sumber.


Share:


Comments