Optimasi Load Image Pada Web Anda Dengan Lazy Jquery

Optimasi Load Image Pada Web Anda Dengan Lazy jQuery - Ada beberapa faktor yang menciptakan performa load web kita menjadi lama, di luar css dan js, anda satu hal yang menciptakan load web menjadi lama, yaitu media khususnya gambar, alasannya ialah web kini niscaya tidak akan sanggup jauh dengan penggunakan gambar. Terkadang jikalau 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, alasannya ialah di jaman kini untuk membeli space disk sangat lah murah di bandingkan dulu. Yang jadi persoalan utama kini ialah di load web akan menjadi berat.

Kemarin-kemarin aku gres dapet ilmu gres dari teman aku untuk persoalan ini. Lalu teman aku menyarankan untuk menggunakan sebuah plugin jQuery berjulukan lazy.

Lazy ialah 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 d0wnl0ad lazy jQuery terlebih dahulu (disini). Jika lazy sudah jawaban di unduh, anda sanggup menginstal lazy dengan cara yang berbeda. Pilih cara yang Anda di bawah ini.

Host sendiri

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

CDN

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

<!-- jsDeliver -->
<script type="text/j4vascript" 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/

Sumber http://www.kang-cahya.com

Share this post

Berlangganan update artikel terbaru via email: