Optimasi Load Image Pada Web Anda Dengan Lazy jQuery

Optimasi Load Image Pada Web Anda Dengan Lazy jQuery - Ada beberapa faktor yang membuat performa load web kita menjadi lama, di luar css dan js, anda satu hal yang membuat load web menjadi lama, yaitu media khususnya gambar, karena web sekarang pasti tidak akan bisa jauh dengan penggunakan gambar. Terkadang kalau kita tidak membatasi batas maksimum gambar yang harus di unggah pada sebuah web itu akan menjadi masalah. Selain menimbulkan space disk yang akan cepat habis, load web pun akan menjadi lambat. Mungkin untuk urusan space tidak terlalu di masalahkan, karena di jaman sekarang untuk membeli space disk sangat lah murah di bandingkan dulu. Yang jadi masalah utama sekarang adalah di load web akan menjadi berat.

Kemarin-kemarin saya baru dapet ilmu baru dari teman saya untuk masalah ini. Lalu teman saya menyarankan untuk memakai sebuah plugin jQuery bernama lazy.

Lazy adalah plugin pemuat konten untuk jQuery. Dia cepat, kaya fitur, extensible dan ringan. Ini dirancang untuk mempercepat pemuatan (loading) halaman dan mengurangi trafik lalulintas ke pengguna dengan cara memuat konten yang sedang tampil didepan mata saja.

Fitur :

• Retina support
• Fully open source
• Scroll in all directions
• Different callbacks
• Implement custom loaders
• Image placeholders
• Use effects
• Throttled
• Public functions
• Delayed loading
• Many instances
• Use inside containers
• Event support
• Mighty configuration

Pertama-tama, anda download lazy jQuery terlebih dahulu (disini). Jika lazy sudah selesai di unduh, anda dapat menginstal lazy dengan cara yang berbeda. Pilih cara yang Anda di bawah ini.

Host sendiri

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

CDN

<!-- cdnjs -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/0.6.4/jquery.lazy.min.js"></script>

<!-- jsDeliver -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/0.6.4/jquery.lazy.min.js"></script>

Package Managers

$ npm install jquery-lazy
$ bower install jquery-lazy

Untuk mengimplementasikan lazy sangatlah mudah, anda cukup menambahkan nama class pada tag image html anda.

HTML

<!-- load images the lazy way -->
<img class="lazy" data-src="path/to/image.jpg" />

<!-- load background images of other element types -->
<div class="lazy" data-src="path/to/image.jpg"></div>

JAVASCRIPT

$(function() {
    $('.lazy').lazy();
});

Danke :)
Tschüss, Bis Bald :)

More Info :: http://jquery.eisbehr.de/lazy/