Halo, teman-teman kembali lagi di tutorial web design, kali ini saya akan memberikan tutorial mengenai cara untuk membuat lazy load (scrolling) dengan menggunakan javascript.
Lazy load sendiri banyak digunakan, seperti untuk mengambil data menggunakan AJAX dari web service, contohnya facebook, instagram, dll.
Ada pun pada tutorial kali ini saya hanya akan menggunakan dummy data, sehingga tidak perlu menggunakan AJAX untuk mengambil data dari web service.
Requirement
- css/style.css: digunakan untuk menset tampilan dari halaman lazy load yang akan kita buat.
- index.html: merupakan file html utama yang menampung setiap object yang akan ditampilkan di browser.
- js/config.js: digunakan untuk mendeklarasikan global variabel termasuk dummy data, dan object html untuk merender data yang telah dimanipulasi.
- js/LazyLoad.js: merupakan class LazyLoad yang digunakan untuk memanipulasi data yang akan dirender secara lazy load.
- js/script.js: digunakan sebagai trigger, dan event handler.
index.html
- div.container: digunakan sebagai container untuk mewrap halaman, serta untuk mendapatkan tinggi dari object html.
- div.list#list-item: digunakan sebagai object html utama untuk menampung data yang telah render.
css/style.css
Berikut adalah file css yang diperlukan untuk memperbagus tampilan dari lazy load page yang akan kita buat.
js/config.js
- data: sebagai variabel global yang menampung data dummy, sekaligus sebagai source dari data yang akan ditampilkan di object html yang telah di render.
- el: sebagai variabel yang menampung object html dengan id #list-item, yang mana merupakan html wrapper yang manmpung list dari data yang telah di render.
js/LazyLoad.js
List dari property class:
- el: menampung element html object yang digunakan untuk merender list.
- data: digunakan untuk menampung dummy data.
- randomData: array yang digunakan untuk menampung data sementara yang telah dirandom.
- displayData: merupakan array yang telah siap untuk dirender dan ditampilkan.
- dataLength: merupakan banyak data dari dummy data.
Method dari class:
- renderData(): digunakan untuk merender data dari array list object menjadi object html yang siap ditampilkan.
List dari method class:
- randomDataFn(): digunakan untuk merandom data dan menyimpannya ke property randomData.
- setDisplayData(): digunakan untuk menyiapkan data yang siap untuk ditampilkan, method ini akan menstore data ke property displayData.
- resetData(): digunakan untuk mereset randomData property, sehingga siap untuk menampung data random baru.
- init(): digunakan sebagai method yang akan dipanggil, dan akan merender object data melalui method yang dipanggil.
js/script.js
- var load: merupakan variabel yang digunakan sebagai instance dari class LazyLoad.
- window.onscroll: merupakan event handler untuk window scrolling.
- window.onload: merupakan event handler ketika browser membuka halaman pertama kali, event ini akan meload data ketika pertama kali.
