Wed Dec 2019 1 year ago

membuat load more dengan jscroll

jScroll adalah plugin jQuery untuk bergulir tak terbatas, yang ditulis oleh Philip Klauzinski. bergulir tak terbatas; juga dikenal sebagai lazy loading, bergulir tak berujung, AutoPager, halaman tak berujung, dll .; adalah kemampuan untuk memuat konten melalui AJAX dalam halaman saat ini atau area konten yang Anda gulir ke bawah. Konten baru dapat dimuat secara otomatis setiap kali Anda menggulir ke akhir konten yang ada, atau dapat dipicu untuk memuat dengan mengklik link navigasi pada akhir konten yang ada.

Contoh bergulir tak terbatas "News Feed" halaman Anda Facebook. Anda mungkin memperhatikan bahwa ketika Anda gulir ke bawah halaman ini, konten baru akan sering memuat secara otomatis, atau Anda akan diberikan link ke "Posting Lama" yang akan memuat lebih banyak konten saat diklik.

Pemakaian

Terdapat dua metode pemanggilan data load yaitu dengan klik tombol untuk memuat data load selanjutnya dan dengan scroll otomatis data muncul.  

$('.infinite-scroll').jscroll();

Metode jscroll mengambil obyek opsional literal sebagai parameter untuk mengesampingkan pilihan default. Sebuah contoh bagaimana hal ini dapat dilakukan ditunjukkan di bawah ini.

$('.infinite-scroll').jscroll({ loadingHtml: 'Loading Loading...', padding: 20, nextSelector: 'a.jscroll-next:last', contentSelector: 'li'
});

 

Options

Option Key Default Value Description
debug false Bila diatur ke true, output informasi yang berguna untuk menampilkan layar konsol jika objek konsolnya ada.
auto Trigger true Ketika diatur ke true, memicu pemuatan set berikutnya konten secara otomatis ketika pengguna gulungan ke bagian bawah elemen yang mengandung. Bila diatur ke false, tautan berikutnya yang dibutuhkan akan memicu pemuatan set berikutnya konten saat diklik.
auto Trigger Until false Set ke integer besar dari 0 untuk mematikan autoTrigger dari paging setelah jumlah tertentu dari halaman. Membutuhkan autoTrigger untuk menjadi kenyataan.
loading Html ' Loading...' HTML untuk menunjukkan di bagian bawah konten saat memuat set berikutnya.
padding 0 Jarak dari bagian bawah konten digulir di mana untuk memicu pemuatan set berikutnya konten. Ini hanya berlaku ketika autoTrigger diatur ke benar.
next Selector 'a:last' Memilih untuk menggunakan untuk menemukan link yang berisi menunjuk href untuk set berikutnya konten. Jika pemilih ini tidak ditemukan, atau jika tidak mengandung atribut href, jScroll akan diri menghancurkan dan memperlonggar dari elemen atas yang disebut.
content Selector '' Sebuah pemilih kenyamanan untuk memuat hanya bagian dari konten dalam respon untuk set berikutnya konten. pemilih ini akan diabaikan jika dibiarkan kosong dan akan menerapkan seluruh respon terhadap DOM.
callback false  Fungsi untuk pilihan ini dan akan disebut pada akhir setiap halaman beban. Atau, Anda dapat lulus fungsi sebagai satu-satunya argumen ke jScroll Instansiasi bukan obyek pilihan, dan itu akan dikembalikan sebagai callback.

Untuk informasi lebih lanjut tentang opsi contentSelector dan bagaimana beban fragmen respon, lihat jQuery documentation for the .load() method.

1. Menggunakan auto load

Berikut contoh kode auto load, dengan cukup scroll mouse ke bawah tampilan akan ke load otomatis.

HTML (disingkat)

<div class="scroll"> <h3>Page 1</h3> <p>Content here...</p> <a href="example-page2.html">next page</a>
</div>

The JavaScript

$('.scroll').jscroll();

 

2. Menggunakan metode autoTrigger = false

Menggunakan autoTriger membuat scroll tidak bisa automatis, harus menggunakan media tombol / link untuk membuka bagian selanjutnya

//Tidak secara otomatis memuat konten pada scroll, memerlukan pengguna untuk mengklik link bukan
$('.scroll').jscroll({ autoTrigger: false
});

3. Menggunakan autoTriggerUntil

Menggunakan autoTriggerUntil yaitu membuat otomatis load bagian halaman sebanyak autoTrigerUntil diberikan, selanjutnya akan diarahkan ke manual load dengan triger menggunakan tombol

//autoTrigger pada scroll sampai setelah permintaan ketiga adalah dimuat
$('.scroll').jscroll({ autoTriggerUntil: 3
});

Demikian cara autoload dengan jscroll, silahkan untuk yang ingin mencoba dan mendownloadnya langsung download.

Download