Loading yang lama karena banyaknya gambar pada blog dapat kita benahi dengan plugin JQuery yaitu "Lazy Load". Lazy load ini berfungsi untuk mengambil gambar atau meload gambar jika kita mengarah kegambar, sehingga membuat blog atau website menjadi lebih cepat dari sisi loading karena tidak perlu mengambil gambar yang belum diperlukan oleh pengunjung blog kita.
Mengatasi Loading Blog Yang Lama
Untuk mengatasi loading blog yang lama dengan plugin lazy load ini kita membutuhkan JQuery. Jquery adalah sebuah library dari JavaScript yang mana dirancang untuk memudahkan penyusunan Client-side pada file HTML, jika blog kawan sudah menggunakan JQuery maka kawan cukup menambahkan kode Lazy Load saja. Untuk menggunakan JQuery silahkan copy script dibawah ini dan letakkan di atas tanda</head>.
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
Setelah meletakkan kode JQuery diatas maka letakkan kode lazy load tepat dibawah kode JQuery. Kawan bisa menggunakan plugin lazy load dibawah ini.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
Selanjutnya kita akan menulis kode agar lazy load ini berfungsi dalam blog kita. Berikut sedikit penjabaran tentang penggunaan lazy load yang bisa menjadi referensi kawan untuk meletakkannya diblog.
Menerapkan lazy load pada semua gambar
Kawan bisa menerapkan lazy load ini pada semua gambar sehingga semua gambar akan "diload" jika diperlukan oleh pengunjung. Untuk kode menerapkan lazy load pada semua gambar kawan bisa menggunakan kode seperti dibawah ini.
<script type="text/javascript">
$(function() {
$("img").lazyload();
});
</script>
$(function() {
$("img").lazyload();
});
</script>
Menerapkan lazy load pada gambar tertentu
Selain lazy load ini bisa diterapkan pada semua gambar, kawan juga bisa menerapkan lazy load hanya pada gambar tertentu misalnya saja pada classlazy saja, sehingga setiap gambar yang memiliki class lazy akan ditampilkan jika pengunjung memerlukannya tetapi gambar yang tidak menggunakan class lazy akan diload meskipun pengunjung belum membutuhkannya. Untuk kodenya kawan bisa menggunakan seperti dibawah ini.
<script type="text/javascript">
$(function() {
$("img.lazy").lazyload();
});
</script>
$(function() {
$("img.lazy").lazyload();
});
</script>
Penggunaan kode lazy load diatas diletakkan setelah pemanggilan kode JQuery dan lazy load, untuk script lengkapnya bisa dilihat seperti dibawah ini.
Script Lengkap
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
<script type="text/javascript">
$(function() {
$("img").lazyload();
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
<script type="text/javascript">
$(function() {
$("img").lazyload();
});
</script>
Script yang sudah disampaikan diatas hanya sebagai contoh sederhana saja, jika kawan ingin memperlajari tingkat lanjut plugin JQuery yang bernama lazy load, bisa dilihat pada link berikut.
Belajar Lazy Load
Demikian tutorial cara mengatasi loading blog yang lama, semoga artikel ini dapat bermanfaat dan bisa mengatasi kecepatan blog yang lambat. Jangan lupa untuk menyampaikan artikel ini dengan kawan lainnya dengan cara membagikan artikel ini dengan menu bagikan dibawah. Salam.
