Cara Menampilkan Foto On Demand Pada Website Dengan Lazy Load Jquery

: 529 | : 0 | : 09 April 2017 | Programming


Kemong 69
- Kontributor

Tags | Javascript | Web programming

Dengan mempersingkat waktu pemuatan sebuah halaman website, diharapkan pengguna akan lebih nyaman dalam menjelajah website walaupun dengan perangkat mobile mereka yang memiliki koneksi internet lambat.

 

Ok melanjutkan bahasan pada artikel sebelumnya, mengenai pentingnya penggunaan pustaka lazy load pada sebuah website. Kali ini akan kita bahas secara detil mengenai tekniknya.

Lazy load pada dasarnya adalah sebuah cara untuk menunda pemuatan sebuah file foto dari server ke sebuah halaman web. Maksudnya, Lazy load akan mencegah browser untuk mengambil file foto yang ada pada src sebuah tag img di dalam sebuah halaman web secara bersamaan. Lazy load akan menginstruksikan kepada browser untuk file-file foto yang berada pada tag img yang posisinya ada didalam layar pengguna.

Untuk contoh penggunaannya silakan lihat disini, jika pada saat kita membuka link tersebut dan kita geser layar kebawah, foto-foto yang ada pada tag img di halaman tersebut akan dimuat satu-persatu sesuai dengan posisinya di layar. Artinya apabila sebuah tag img berada dibawah layar browser pengguna maka file src pada tag img tersebut tidak akan diambil dari server sampai pengguna menggeser layarnya ke tag yang bersangkutan.

Hal yang paling utama untuk dilakukan adalah dengan mengunduh file JQuery dan JQuery.LazyLoad pada halaman resminya. Ekstrak file zip dan pindahkan file jquery.lazyload.js yang baru kamu unduh ke folder dokumen statik website kamu. Setelah semua file berada pada folder statik, langkah yang perlu dilakukan adalah sebagai berikut :

  1. Sematkan kode berikut ini pada setiap halaman website kamu yang ingin menggunakan fitur Lazy Load. Harap diingat, bahwa penggunaan lazy load hanya effisien jika diterapkan pada halaman yang memiliki gambar banyak, sementara jika gambar yang ditampilkan sedikit justru merugikan bandwith pengguna.
    <script src="jquery.js"></script>
    <script src="jquery.lazyload.js"></script>
  2. Pada setiap foto yang ingin kamu tampilkan dengan fitur lazy load, sematkan kelas berikut ini dan ubah src menjadi data-original
    <img class="lazy" data-original="img/example.jpg" width="640" height="480">
    
    Perhatikan bahwa tag img yang memakai class="lazy" haruslah memiliki attribut lebar dan tinggi yang sudah ditentukan. Hal ini diperlukan agar Lazy load dapat membuat kotak abu-abu sebagai wadah yang nantinya akan diisi oleh foto sebelum foto tersebut selesai diambil dari server.
  3. Buat sebuah file javascript baru, atau kamu boleh sematkan kode berikut ini pada setiap halaman web yang ingin menggunakan fitur lazy load
    $(function() {
        $("img.lazy").lazyload();
    });

Itulah 3 langkah mudah untuk menampilkan foto dengan lazy load secara umum. Selain itu kamu juga bisa menentukan titik picu yaitu pada jarak berapa pixel kah sebuah foto akan diproses oleh lazy load sebelum pengguna menggeser layarnya sampai ke tag img tersebut.

$("img.lazy").lazyload({
    threshold : 200
});

dengan mengubah sedikit kode diatas, kamu bisa menentukan jarak pemicu fungsi lazyload, 200 di situ artinya adalah 200 pixel sebelum(diatas) tag img yang berkaitan.

Kamu juga bisa menggunakan efek yang akan tampil pada saat sebuah foto dimuat, misalnya efek fade ini dengan menyematkan kode berikut ini

$("img.lazy").lazyload({
    effect : "fadeIn"
});

Itulah cara penggunaan pustaka lazy load pada sebuah halaman website, jika kamu perhatikan, di website Topters ini juga memakai pustaka yang sama. Dengan mempersingkat waktu pemuatan sebuah halaman website, diharapkan pengguna akan lebih nyaman dalam menjelajah website walaupun dengan perangkat mobile mereka yang memiliki koneksi internet lambat.

Login untuk melihat komentar


Powered by: