Menggunakan JavaScript untuk melaksanakan fungsi tatal tak terhingga

Dengan pembangunan Internet mudah alih dan aplikasi web, pengalaman pengguna menjadi semakin penting. Apabila mereka bentuk dan membangunkan halaman web, faktor utama ialah cara kami mengendalikan senarai panjang dan jumlah kandungan yang besar. Cara tradisional ialah menggunakan paging, tetapi dengan kemunculan JavaScript dan Ajax, kami kini boleh melaksanakan fungsi tatal tak terhingga (Tatal Tak Terhingga).

Apakah tatal tak terhingga?

Tatal tak terhingga ialah kaedah pemuatan halaman berdasarkan gelagat tatal pengguna. Tatal tak terhingga memuatkan lebih banyak kandungan secara automatik apabila pengguna menatal ke bahagian bawah halaman, mengekalkan kandungan yang terbentang. Kaedah ini lebih lancar dan lebih mesra pengguna daripada halaman tradisional dan tidak memerlukan pengguna mengklik untuk membelok halaman, membolehkan pengguna menyemak imbas lebih banyak kandungan dengan lancar.

Bagaimana untuk mencapai tatal tak terhingga menggunakan JavaScript?

Untuk mencapai penatalan tidak terhingga, kami perlu memantau kelakuan menatal pengguna Apabila menatal ke bahagian bawah halaman, kami perlu memulakan permintaan Ajax untuk memuatkan lebih banyak data. Berikut ialah langkah untuk melaksanakan penatalan tak terhingga menggunakan JavaScript dan jQuery:

1. Tetapkan titik pencetus di bahagian bawah halaman

Pertama, kita perlu menetapkan titik pencetus , iaitu titik di mana pengguna menatal Bendera untuk memuatkan lebih banyak data apabila sampai ke bahagian bawah halaman. Kita boleh memilih elemen atau teg dalam halaman dan menyembunyikannya dalam CSS. Dengan cara ini apabila pengguna menatal ke bawah, ia akan mencetuskan dan mula memuatkan lebih banyak kandungan secara automatik.

// HTML
<div id="load-more">Load More</div>

// CSS
#load-more {
   display: none;
}

2. Mendengar tingkah laku menatal

Seterusnya, kita perlu memantau tingkah laku menatal halaman. Kita boleh menggunakan kaedah scroll() jQuery untuk mendengar acara tatal dan memaparkan titik pencetus apabila menatal ke bahagian bawah halaman.

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() == $(document).height()) {
    $('#load-more').show();
  }
});

3. Muatkan lebih banyak data

Apabila pengguna menatal ke bawah, kami perlu membuat permintaan Ajax untuk memuatkan lebih banyak data. Kita boleh menggunakan kaedah $.ajax() jQuery untuk memulakan permintaan dan menambah data baharu pada halaman selepas permintaan itu berjaya.

$('#load-more').click(function() {
  $.ajax({
    url: '/more-data',
    type: 'get',
    dataType: 'json',
    success: function(data) {
      // Add new data to the page
      $('#data').append(data);
      // Hide the trigger point
      $('#load-more').hide();
    }
  });
});

4. Optimumkan prestasi

Akhir sekali, kita perlu mempertimbangkan isu prestasi. Penatalan tanpa had boleh menyebabkan halaman menjadi perlahan atau ranap apabila memproses sejumlah besar data. Kami boleh menyelesaikan masalah ini dengan mengehadkan jumlah data yang dikembalikan setiap permintaan atau menetapkan masa tunda untuk mengehadkan kelajuan skrol pengguna.

var isLoading = false;

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() == $(document).height() && !isLoading) {
    isLoading = true;
    $('#load-more').show();
    setTimeout(function() {
      $.ajax({
        url: '/more-data',
        type: 'get',
        dataType: 'json',
        success: function(data) {
          // Add new data to the page
          $('#data').append(data);
          // Hide the trigger point
          $('#load-more').hide();
          isLoading = false;
        }
      });
    }, 1000);
  }
});

Ringkasan

Tatal tak terhingga ialah cara yang lancar dan mesra pengguna untuk memuatkan halaman. Menggunakan JavaScript dan jQuery, kami boleh melaksanakan fungsi tatal tak terhingga dengan mudah. Walau bagaimanapun, apabila berurusan dengan jumlah data yang besar, kami perlu mempertimbangkan isu prestasi dan melaksanakan beberapa pengoptimuman untuk memastikan halaman tidak perlahan atau ranap.

Atas ialah kandungan terperinci Menggunakan JavaScript untuk melaksanakan fungsi tatal tak terhingga. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!