Melaksanakan tatal tak terhingga dalam jQuery

Ringkasan mata utama

Infinite Scrolling (juga dikenali sebagai Lazy Loading atau No Paging) adalah alternatif kepada paging, yang memuat kandungan baru melalui AJAX apabila pengguna melengkapkan menatal kandungan sedia ada pada halaman.
Walaupun Scrolling Infinite mempunyai banyak kelebihan, ia juga mempunyai beberapa kelemahan, seperti tidak dapat menyelamatkan lokasi di sungai dan tidak menjadi enjin carian yang mesra. Untuk mengelakkan masalah dengan enjin carian, alternatif dengan paging atau peta tapak hendaklah disediakan.
Melaksanakan Scrolling Infinite termasuk membuat susun atur HTML dan CSS asas, menyediakan mod AJAX untuk permintaan pemprosesan, melaksanakan data baru ke halaman, dan mengakhiri data pemprosesan.
pelaksanaan tatal tak terhingga dapat diperbaiki dengan memadam butang dan memanggil fungsi apabila pengguna menatal ke hujung halaman, menghantar data mentah melalui JSON dan membuat tag menggunakan jQuery itu sendiri, dan termasuk mesej di dalam Tanggapan JSON, terangkan sama ada permintaan itu selesai dengan betul dan sama ada terdapat lebih banyak jawatan untuk dimuatkan.

pemaju web telah lama beralih kepada paging tradisional apabila terdapat banyak kandungan yang akan dipaparkan. Ya, penomboran masih merupakan cara yang sangat berkesan untuk memaparkan kandungan, tetapi dalam artikel ini kita akan membincangkan alternatif - tatal tak terhingga. Teknik ini juga dipanggil pemuatan malas atau tiada penomboran, dan apabila pengguna melengkapkan menatal kandungan sedia ada pada halaman, ia memuat kandungan baru melalui AJAX. Sesetengah gergasi internet, termasuk Facebook dan Pinterest, menggunakan menatal tanpa had. Dalam artikel ini, kami akan membincangkan membina plugin jQuery anda sendiri untuk menatal tak terhingga.

Pedagang dan Downs

Kelebihannya jelas. Untuk mendapatkan lebih banyak kandungan, anda tidak perlu mengarahkan ke halaman baru (ini cenderung mengalihkan perhatian anda ke kawasan yang berbeza apabila halaman dimuat). Dengan melaksanakan Scrolling Infinite, anda pada dasarnya boleh mengawal fokus pengguna pada halaman! Menatal tak terhingga tidak berkesan dalam semua kes. Sebagai contoh, jika pengguna mengklik pautan dan menggunakan butang belakang penyemak imbas, pengguna kehilangan lokasi dalam aliran data yang dimuatkan melalui AJAX. Satu perkara yang perlu anda perhatikan semasa melaksanakan ciri ini adalah untuk memuatkan kandungan baru dalam tab atau tetingkap baru. Kelemahan yang berkaitan dengan skrol tak terhingga adalah bahawa ia tidak dapat menyelamatkan lokasi di aliran. Katakan anda ingin berkongsi kandungan pada halaman menatal tanpa had dengan rakan melalui e -mel. Anda tidak boleh melakukan ini kerana URL akan membawa anda kembali ke lokasi awal. Oleh itu, sebelum anda membuat keputusan untuk terus menggunakannya, pertimbangkan ketersediaan laman web anda. Juga, ingat bahawa ia tidak begitu mesra enjin carian sebelum melaksanakan menatal tak terhingga. Untuk mengelakkan sebarang masalah dengan penglihatan enjin carian, pastikan anda menyediakan alternatif dengan peta paging atau tapak.

Mula

kita akan bermula dengan membuat halaman yang sangat mudah. Berikut ini menunjukkan bahagian penting contoh HTML dan CSS. Selebihnya fail boleh dilihat dengan mengklik pautan demo pada akhir tutorial ini.

html

<div id="data-container">
  <div class="data-item">
    Hi! I am the first item.
  </div>
  <div class="data-item">
    Hi! I am the second item.
  </div>
  <div class="data-item">
    Hi! I am the third item.
  </div>
  <div class="data-item">
    Ok, this is getting boring.
  </div>
  <div class="data-item">
    Let's try something new.
  </div>
  <div class="data-item">
    How about loading some more items through AJAX?
  </div>
  <div class="data-item">
    Click the button below to load more items.
  </div>
</div>
<div id="button-more" onclick="lazyload.load()">
  Load more items
</div>
<div id="loading-div">
  loading more items
</div>

CSS

#data-container {
  margin: 10px;
}

#data-container .data-item {
  background-color: #444444;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 5px;
  margin: 5px;
  color: #fff;
}

#loading-div {
  display: none;
}

#button-more{
  cursor: pointer;
  margin: 0 auto;
  background-color: #aeaeae;
  color: #fff;
  width: 200px;
  height: 50px;
  line-height: 50px;
}

aliran kerja asas

Jika anda melihat dokumen yang kami buat, jawatan baru harus dimuatkan apabila anda mengklik butang Load More. Berikut adalah beberapa perkara yang perlu dipertimbangkan.

• Permintaan perlu dibuat ke URL yang mengembalikan item baru untuk dilampirkan ke halaman.
• Jika anda mengklik butang sekali lagi, proses ini harus diulang, tetapi kali kedua anda harus mengembalikan jawatan yang lebih baru.
• Jawatan baru hendaklah disediakan untuk setiap permintaan berikutnya sehingga tidak ada lagi jawatan yang akan dipaparkan.
• Apabila tidak ada lagi jawatan yang tersisa, anda harus memberitahu pengguna bahawa dia telah sampai pada akhir.

mod AJAX

Sebaik -baiknya, anda perlu mengisytiharkan pembolehubah untuk menyimpan nombor halaman, yang seterusnya mengubah URL yang anda ingin hantar permintaan. Dalam demo kami, kami mempunyai tiga halaman tersebut -2.html, 3.html dan kosong 4.html (untuk tujuan demonstrasi). Apabila anda mengklik butang untuk memuat lebih banyak catatan, ia mengambil sedikit masa sebelum permintaan selesai dengan jayanya dan memuatkan projek baru. Dalam kes ini, kami akan menyembunyikan butang beban dan memaparkan beberapa teks yang menunjukkan bahawa projek baru dimuatkan:

<div id="data-container">
  <div class="data-item">
    Hi! I am the first item.
  </div>
  <div class="data-item">
    Hi! I am the second item.
  </div>
  <div class="data-item">
    Hi! I am the third item.
  </div>
  <div class="data-item">
    Ok, this is getting boring.
  </div>
  <div class="data-item">
    Let's try something new.
  </div>
  <div class="data-item">
    How about loading some more items through AJAX?
  </div>
  <div class="data-item">
    Click the button below to load more items.
  </div>
</div>
<div id="button-more" onclick="lazyload.load()">
  Load more items
</div>
<div id="loading-div">
  loading more items
</div>

Lampirkan data ke halaman

Pertama, kita perlu membatalkan perubahan yang kita lakukan sebagai permintaan dibuat, iaitu, memaparkan butang Load More sekali lagi dan menyembunyikan teks. Kedua, kita perlu menambah respons yang kita terima ke senarai item yang sudah ada pada halaman. Perhatikan bahawa dalam demo, kami secara langsung menerima tag HTML untuk memudahkan operasi. Anda juga boleh menghantar respons JSON, menambah lebih banyak pembolehubah, seperti mesej atau status. Kod tambahan ditunjukkan di bawah.

#data-container {
  margin: 10px;
}

#data-container .data-item {
  background-color: #444444;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 5px;
  margin: 5px;
  color: #fff;
}

#loading-div {
  display: none;
}

#button-more{
  cursor: pointer;
  margin: 0 auto;
  background-color: #aeaeae;
  color: #fff;
  width: 200px;
  height: 50px;
  line-height: 50px;
}

akhir data pemprosesan

Sebaik sahaja anda sampai ke hujung jawatan, anda perlu menunjukkan kepada pengguna bahawa tidak ada lagi jawatan untuk dimuatkan pada halaman. Ini boleh dilakukan dalam beberapa cara. Kami boleh menghantar negeri melalui kod atau mesej yang tertanam dalam respons itu sendiri. Walau bagaimanapun, kerana kami menggunakan tag HTML secara langsung dalam kes ini, tindak balas kosong mewakili akhir aliran.

$(buttonId).hide();
$(loadingId).show();

Kesimpulan

Demonstrasi yang kami cadangkan adalah sangat asas dan kita boleh melakukan lebih baik jika kita berusaha lebih banyak. Pertama, kita boleh memadam butang sepenuhnya dan panggil fungsi apabila pengguna menatal ke hujung halaman. Ini akan menghapuskan langkah tambahan untuk pengguna mengklik butang dan membuat keseluruhan proses lebih cepat. Kedua, kita hanya boleh menghantar data mentah melalui JSON dan membuat tag menggunakan jQuery itu sendiri. Contohnya:

$(buttonId).show();
$(loadingId).hide();
$(response).appendTo($(container));
page += 1;

Akhirnya, tindak balas JSON boleh mengandungi mesej bahawa permintaan itu selesai dengan betul, data, dan sama ada terdapat lebih banyak jawatan untuk dimuatkan. Dalam kes ini, ini adalah cara yang lebih berkesan untuk menghantar respons. Untuk maklumat lanjut mengenai menatal tanpa had, anda boleh melawat laman web yang dibuat khusus untuk tujuan ini. Ia mengandungi maklumat umum mengenai idea dan alat sedia ada yang boleh anda gunakan di laman web untuk melaksanakannya. Demo langsung boleh didapati di halaman GitHub. Kod ini juga boleh didapati di GitHub.

(bahagian Soalan Lazim ditinggalkan di sini kerana artikel itu terlalu panjang dan tidak sepadan dengan matlamat asal pseudo. Selepas pengubahsuaian, ia akan menjejaskan integriti artikel dan logik

Atas ialah kandungan terperinci Melaksanakan tatal tak terhingga dalam jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!