6 JQuery Demo Menatal Infinite

Menatal Infinite kini menjadi ciri umum dan terdapat beberapa kes di mana ia benar -benar berguna. Sebagai contoh terdapat beberapa laman web di mana kita tidak dapat membayangkan sistem penomboran yang baik, seperti Twitter atau Facebook. Satu lagi contoh di mana Scrolling Infinite boleh berguna adalah untuk enjin carian: anda akan mahu terus melihat pautan baru semasa anda tidak menemui yang anda inginkan, dan sistem penomboran dapat melambatkan anda dalam penyelidikan anda. Jika anda perlu menggunakan Tatal Infinite untuk projek anda, berikut adalah enam demo yang boleh anda gunakan sebagai inspirasi untuk melaksanakannya. Perhatikan bahawa, kecuali yang terakhir, semua demo ini ditulis dengan jQuery dan beberapa contoh menggunakan plugin jQuery. Walau bagaimanapun, contoh -contoh lain boleh disesuaikan dengan mudah untuk vanila JS tanpa sebarang masalah.

Takeaways Key

Artikel ini membentangkan enam demo tentang cara melaksanakan Tatal Infinite, ciri yang membolehkan menatal berterusan melalui kandungan tanpa perlu mengklik pada pautan penomboran, meningkatkan pengalaman dan penglibatan pengguna.
• Demo termasuk menatal tak terhingga melalui grid, catatan blog, imej, nombor, spreadsheet, dan gabungan tatal dan penomboran tak terhingga. Setiap demo ditulis dalam jQuery, walaupun mereka boleh disesuaikan untuk vanila JS, dan ada yang menggunakan plugin jQuery.
• Pelaksanaan tatal tak terhingga boleh disesuaikan mengikut keperluan projek, seperti menyesuaikan mesej pemuatan, mengendalikan kesilapan, bekerja dengan kandungan dinamik, berhenti apabila tidak ada lagi kandungan, dan meningkatkan prestasi dengan mengoptimumkan kandungan.
1. Tatal dan Grid Infinite

Demo ini menggunakan plugin jQuery Masonry bersama -sama dengan plugin tatal tak terhingga. Plugin Masonry adalah baik untuk mendapatkan susun atur grid cecair. Plugin Tatal Infinite oleh Paul Irish adalah baik untuk memuatkan halaman yang sudah ada (jadi baik untuk SEO anda). Anda boleh menggunakannya untuk memuatkan halaman statik seperti page2.html, page3.html, dan lain -lain, tetapi plugin ini juga mengendalikan halaman yang dihasilkan, seperti Page.php? P = 2, Page.php? P = 3. Walau bagaimanapun, untuk menggunakannya, anda perlu mempunyai nombor halaman untuk kenaikan URL anda jadi, jika anda mempunyai halaman seperti Page.php? Data = XXX, maka plugin ini bukan untuk anda.

Penggunaan - JQuery

<span><span><span><div</span> class<span>="grid"</span>></span>
</span>	<span><span><span><div</span> class<span>="grid-item grid-item-2"</span>></span>
</span>		<span><span><span><p</span>></span>content<span><span></p</span>></span>
</span>	<span><span><span></div</span>></span>
</span>	…
<span><span><span></div</span>></span>
</span>
<span><!-- The next page which content will be loaded when scrolled -->
</span><span><span><span><nav</span> id<span>="pagination"</span>></span>
</span>	<span><span><span><p</span>></span><span><span><a</span> href<span>="page-2.html"</span>></span>Page 2<span><span></a</span>></span><span><span></p</span>></span>
</span><span><span><span></nav</span>></span></span>

2. Menatal Infinite melalui catatan blog

<span>$(document).ready(function() {
</span>	<span>var grid = $('.grid');
</span>
	grid<span>.masonry({
</span>		<span>itemSelector: '.grid-item',
</span>		<span>columnWidth: 200
</span>	<span>});
</span>
	grid<span>.infinitescroll({
</span>		<span>// Pagination element that will be hidden
</span>		<span>navSelector: '#pagination',
</span>
		<span>// Next page link
</span>		<span>nextSelector: '#pagination p a',
</span>
		<span>// Selector of items to retrieve
</span>		<span>itemSelector: '.grid-item',
</span>
		<span>// Loading message
</span>		<span>loadingText: 'Loading new items…'
</span>	<span>},
</span>
	<span>// Function called once the elements are retrieved
</span>	<span>function(new_elts) {
</span>		<span>var elts = $(new_elts).css('opacity', 0);
</span>
		elts<span>.animate({opacity: 1});
</span>		grid<span>.masonry('appended', elts);
</span>	<span>});
</span><span>});</span>

Demo ini tidak menggunakan mana -mana plugin atau perpustakaan untuk mengendalikan ciri skrol tak terhingga. Setiap kali akhir halaman dicapai oleh pengguna, ia memuatkan jawatan baru, yang dihasilkan oleh skrip PHP yang menggema kod HTML yang sepadan. Demo tidak pernah mencapai akhir kandungan tetapi anda boleh mencapai ini, sebagai contoh, mengulangi rentetan kosong apabila tidak ada lagi jawatan untuk ditunjukkan. Kami memaparkan imej pemuatan di hujung halaman, dalam semangat Twitter.

Perhatikan bahawa, dalam demo langsung di bawah, jawatan baru dihasilkan oleh fungsi JavaScript, kerana kita tidak boleh menggunakan skrip PHP di Codepen.

Lihat penaman Infinite Pena melalui catatan blog oleh SitePoint (@SitePoint) pada Codepen.

Penggunaan - html

<span><span><span><div</span> class<span>="grid"</span>></span>
</span>	<span><span><span><div</span> class<span>="grid-item grid-item-2"</span>></span>
</span>		<span><span><span><p</span>></span>content<span><span></p</span>></span>
</span>	<span><span><span></div</span>></span>
</span>	…
<span><span><span></div</span>></span>
</span>
<span><!-- The next page which content will be loaded when scrolled -->
</span><span><span><span><nav</span> id<span>="pagination"</span>></span>
</span>	<span><span><span><p</span>></span><span><span><a</span> href<span>="page-2.html"</span>></span>Page 2<span><span></a</span>></span><span><span></p</span>></span>
</span><span><span><span></nav</span>></span></span>

Penggunaan - JQuery

<span>$(document).ready(function() {
</span>	<span>var grid = $('.grid');
</span>
	grid<span>.masonry({
</span>		<span>itemSelector: '.grid-item',
</span>		<span>columnWidth: 200
</span>	<span>});
</span>
	grid<span>.infinitescroll({
</span>		<span>// Pagination element that will be hidden
</span>		<span>navSelector: '#pagination',
</span>
		<span>// Next page link
</span>		<span>nextSelector: '#pagination p a',
</span>
		<span>// Selector of items to retrieve
</span>		<span>itemSelector: '.grid-item',
</span>
		<span>// Loading message
</span>		<span>loadingText: 'Loading new items…'
</span>	<span>},
</span>
	<span>// Function called once the elements are retrieved
</span>	<span>function(new_elts) {
</span>		<span>var elts = $(new_elts).css('opacity', 0);
</span>
		elts<span>.animate({opacity: 1});
</span>		grid<span>.masonry('appended', elts);
</span>	<span>});
</span><span>});</span>

3. Menatal tak terhingga melalui imej

Demo ini dimuatkan dalam imej pada Tatal Infinite dan tidak pernah mencapai akhir. Ia menggunakan plugin tatal jQuery yang tidak berkesudahan yang boleh disesuaikan untuk mencetuskan bilangan piksel x dari bahagian bawah skrin. Demo klon imej yang sama dan memasukkannya ke hujung senarai dan sebagainya, tetapi skrip boleh disesuaikan untuk memuatkan imej dari sumber yang berbeza dengan mudah. ​​

Lihat penaman tak tak terhingga melalui imej oleh SitePoint (@SitePoint) pada codepen.

Penggunaan - html

<span><span><span><ul</span> id<span>="posts"</span>></span>
</span>	<span><span><span><li</span>></span>
</span>		<span><span><span><article</span>></span>content<span><span></article</span>></span>
</span>	<span><span><span></li</span>></span>
</span>
	…
<span><span><span></ul</span>></span>
</span>
<span><span><span><p</span> id<span>="loading"</span>></span>
</span>	<span><span><span><img</span> src<span>="images/loading.gif"</span> alt<span>="Loading…"</span> /></span>
</span><span><span><span></p</span>></span></span>

Penggunaan - JQuery

<span>$(document).ready(function() {
</span>	<span>var win = $(window);
</span>
	<span>// Each time the user scrolls
</span>	win<span>.scroll(function() {
</span>		<span>// End of the document reached?
</span>		<span>if ($(document).height() - win.height() == win.scrollTop()) {
</span>			<span>$('#loading').show();
</span>
			$<span>.ajax({
</span>				<span>url: 'get-post.php',
</span>				<span>dataType: 'html',
</span>				<span>success: function(html) {
</span>					<span>$('#posts').append(html);
</span>					<span>$('#loading').hide();
</span>				<span>}
</span>			<span>});
</span>		<span>}
</span>	<span>});
</span><span>});</span>

4. Senarai nombor tak terhingga

Demo ini menggunakan plugin yang sama seperti sebelumnya tetapi kami telah menggunakan tatal tak terhingga ke senarai dengan bar scroll menegaknya sendiri. Semasa anda menatal ke bawah, nombor hanya dilampirkan sebagai item senarai.

Lihat pen senarai nombor tak terhingga oleh SitePoint (@SitePoint) pada codepen.

Penggunaan - html

<span><span><span><ul</span> id<span>="images"</span>></span>
</span>	<span><span><span><li</span>></span>
</span>		<span><span><span><a</span> href<span>="https://www.pexels.com/photo/mist-misty-fog-foggy-7919/"</span>></span>
</span>			<span><span><span><img</span> src<span>="https://pexels.imgix.net/photos/7919/pexels-photo.jpg?fit=crop&w=640&h=480"</span> alt<span>=""</span> /></span>
</span>		<span><span><span></a</span>></span>
</span>	<span><span><span></li</span>></span>
</span>
	…
<span><span><span></ul</span>></span></span>

Penggunaan - JQuery

<span>$(document).ready(function() {
</span>	<span>$(window).endlessScroll({
</span>		<span>inflowPixels: 300,
</span>		<span>callback: function() {
</span>			<span>var $img = $('#images li:nth-last-child(5)').clone();
</span>			<span>$('#images').append($img);
</span>		<span>}
</span>	<span>});
</span><span>});</span>

5. Spreadsheet Infinite

Demo ini menggunakan teknik yang sama seperti Demo 2 untuk mengesan apabila pengguna telah mencapai akhir dokumen, bukan hanya secara menegak tetapi juga mendatar. Setiap kali satu hujung dicapai, kami menambah baris baru atau lajur baru ke meja. Ia betul -betul jenis skrip yang boleh kita tulis jika kita mahu membuat aplikasi spreadsheet.

Perhatikan bahawa semua sel kosong. Indeks baris dan lajur dijana dengan kaunter CSS supaya kita tidak perlu mengira mereka sendiri.

Lihat spreadsheet Pen Infinite oleh SitePoint (@SitePoint) pada codepen.

Penggunaan - html

<span><span><span><ul</span> id<span>="numbers"</span>></span>
</span>	<span><span><span><li</span>></span>1<span><span></li</span>></span>
</span>	<span><span><span><li</span>></span>2<span><span></li</span>></span>
</span>	<span><span><span><li</span>></span>3<span><span></li</span>></span>
</span>	<span><span><span><li</span>></span>4<span><span></li</span>></span>
</span>	<span><span><span><li</span>></span>5<span><span></li</span>></span>
</span>	…
<span><span><span></ul</span>></span></span>

Penggunaan - JQuery

<span>$(document).ready(function() {
</span>	<span>var offset = $('#numbers li').length;
</span>
	<span>$('#numbers').endlessScroll({
</span>		<span>fireOnce: false,
</span>		<span>fireDelay: false,
</span>		<span>loader: '',
</span>		<span>insertAfter: '#numbers li:last',
</span>		<span>content: function(i) {
</span>			<span>return '<li>' + (i + offset) + '</li>';
</span>		<span>}
</span>	<span>});
</span><span>});</span>

6. Penjejakan Infinite Scrolling

Terdapat kontra terhadap menatal tak terhingga: Jika ia tidak dilaksanakan dengan baik, pengalaman pengguna dapat dipecahkan. Jika anda membiarkan pengguna memuatkan senarai tak terhingga, mereka boleh kehilangan tempat mereka selepas beberapa ketika. Itulah perkara yang tidak pernah ditambah dengan sistem penomboran tradisional. Walau bagaimanapun, penomboran memerlukan tindakan dari pengguna yang tidak diperlukan dengan menatal tak terhingga.

Kedua -dua fakta ini memberikan Tim Severien idea: Bagaimana jika kita menggabungkan menatal dan penomboran tak terhingga, untuk mengambil kesempatan daripada kedua -dua kaedah? Hasilnya adalah demo terakhir ini.

Halaman awal ditunjukkan kepada pengguna. Apabila pengguna menatal ke bawah dan mencapai bahagian bawah halaman, halaman baru dimuat secara automatik. Di sini kita menikmati kesederhanaan dari Scrolling Infinite. Tetapi perkara -perkara baru datang dari senarai yang ditetapkan di bahagian bawah skrin.

Pada mulanya tersembunyi, senarai ini diisi, setiap kali halaman baru dimuatkan, dengan bilangan halaman ini. Dengan cara itu, jika pengguna ingin mengambil halaman kedua, mereka boleh tanpa usaha dengan memukul nombor yang sepadan.

lihat pena penipisan tatal tak tak terhingga oleh SitePoint (@SitePoint) pada codepen.

Penggunaan - html

<span><span><span><div</span> class<span>="grid"</span>></span>
</span>	<span><span><span><div</span> class<span>="grid-item grid-item-2"</span>></span>
</span>		<span><span><span><p</span>></span>content<span><span></p</span>></span>
</span>	<span><span><span></div</span>></span>
</span>	…
<span><span><span></div</span>></span>
</span>
<span><!-- The next page which content will be loaded when scrolled -->
</span><span><span><span><nav</span> id<span>="pagination"</span>></span>
</span>	<span><span><span><p</span>></span><span><span><a</span> href<span>="page-2.html"</span>></span>Page 2<span><span></a</span>></span><span><span></p</span>></span>
</span><span><span><span></nav</span>></span></span>

Penggunaan - JavaScript

Sila ambil perhatian bahawa kod ini menggunakan ES6, tetapi anda boleh menukarnya ke ES5.

<span>$(document).ready(function() {
</span>	<span>var grid = $('.grid');
</span>
	grid<span>.masonry({
</span>		<span>itemSelector: '.grid-item',
</span>		<span>columnWidth: 200
</span>	<span>});
</span>
	grid<span>.infinitescroll({
</span>		<span>// Pagination element that will be hidden
</span>		<span>navSelector: '#pagination',
</span>
		<span>// Next page link
</span>		<span>nextSelector: '#pagination p a',
</span>
		<span>// Selector of items to retrieve
</span>		<span>itemSelector: '.grid-item',
</span>
		<span>// Loading message
</span>		<span>loadingText: 'Loading new items…'
</span>	<span>},
</span>
	<span>// Function called once the elements are retrieved
</span>	<span>function(new_elts) {
</span>		<span>var elts = $(new_elts).css('opacity', 0);
</span>
		elts<span>.animate({opacity: 1});
</span>		grid<span>.masonry('appended', elts);
</span>	<span>});
</span><span>});</span>

Kesimpulan

kami telah melihat enam contoh yang berbeza untuk melaksanakan menatal tak terhingga. Tidak kira apa yang anda cuba bina, anda sepatutnya dapat menggunakan salah satu teknik ini untuk mencapai hasil yang anda inginkan. Seperti biasa, kami ingin mendengar pemikiran anda: Adakah anda telah membina sesuatu yang sejuk dengan salah satu plugin atau teknik ini? Adakah anda mempunyai plugin kegemaran yang anda fikir sepatutnya disebut? Beritahu kami dalam komen!

Soalan Lazim (Soalan Lazim) Mengenai JQuery Infinite Scrolling

Bagaimana saya boleh melaksanakan jQuery Infinite menatal di laman web saya? Pertama, anda perlu memasukkan perpustakaan jQuery dan plugin tatal tak terhingga dalam fail HTML anda. Kemudian, anda perlu memulakan plugin dan tentukan kandungan yang anda mahu muatkan tak terhingga. Anda boleh melakukan ini dengan menggunakan pilihan ItemSelector dan menunjuknya ke kelas atau ID kandungan anda. Akhirnya, anda perlu menentukan laluan ke set kandungan seterusnya menggunakan pilihan Path. Ini boleh menjadi URL atau fungsi yang mengembalikan URL. Ia meningkatkan pengalaman pengguna dengan membenarkan pengguna melayari kandungan tanpa perlu mengklik pada pautan penomboran. Ia juga mengurangkan beban pelayan kerana kandungan hanya dimuatkan apabila diperlukan. Di samping itu, ia boleh meningkatkan penglibatan dan masa yang dihabiskan di laman web anda, kerana pengguna lebih cenderung untuk terus menatal dan meneroka kandungan anda. , Anda boleh menyesuaikan mesej pemuatan dalam jquery Infinite Scrolling. Plugin ini menyediakan pilihan yang dipanggil pemuatan, yang membolehkan anda menentukan teks dan imej untuk dipaparkan semasa kandungan dimuatkan. Anda juga boleh menggunakan CSS untuk gaya mesej pemuatan.

Bagaimana saya boleh mengendalikan kesilapan dalam tatal jQuery tak terhingga? Fungsi ini dipanggil apabila plugin gagal memuat kandungan. Anda boleh menggunakan panggilan balik ini untuk memaparkan mesej ralat atau mengambil tindakan lain. Plugin ini menyediakan kaedah yang dipanggil INFSCR ('mengikat'), yang boleh anda panggil untuk mengikat fungsi tatal tak terhingga ke kandungan yang baru dimuatkan.

Anda boleh menghentikan jquery Infinite menatal apabila tidak ada lagi kandungan dengan memanggil kaedah INFSCR ('Destroy'). Ini akan menghapuskan fungsi tatal tak terhingga dan mencegah kandungan selanjutnya daripada dimuatkan. . Walau bagaimanapun, anda perlu memastikan bahawa plugin lain bersesuaian dengan menatal tak terhingga dan tidak akan mengganggu fungsinya. Dengan menatal ke halaman anda dan menyemak sama ada kandungan baru dimuatkan. Anda juga boleh menggunakan alat pemaju penyemak imbas untuk memantau permintaan rangkaian dan periksa sama ada kandungan baru diminta dan dimuatkan dengan betul. berfungsi pada peranti mudah alih. Walau bagaimanapun, anda perlu memastikan bahawa laman web anda responsif dan fungsi tatal tak terhingga berfungsi dengan baik pada saiz skrin yang berbeza. Prestasi JQuery Infinite menatal dengan mengoptimumkan kandungan anda. Ini termasuk mengurangkan saiz imej anda, meminimumkan fail CSS dan JavaScript anda, dan menggunakan penomboran sisi pelayan untuk mengehadkan jumlah kandungan yang dimuatkan sekaligus. Anda juga boleh menggunakan pemuatan malas untuk hanya memuat imej apabila mereka berada di Viewport.

Atas ialah kandungan terperinci 6 JQuery Demo Menatal Infinite. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!