Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Memuatkan Lebih Banyak Data pada Tatal Hanya Apabila Div Tertentu Kelihatan?

Bagaimana untuk Memuatkan Lebih Banyak Data pada Tatal Hanya Apabila Div Tertentu Kelihatan?

Susan Sarandon
Susan Sarandonasal
2024-11-06 01:01:02715semak imbas

 How to Load More Data on Scroll Only When a Specific Div is Visible?

jQuery: Muatkan Lebih Banyak Data pada Tatal

Memahami cara melaksanakan pemuatan data tambahan sebaik sahaja div tertentu (. loading) menjadi kelihatan boleh menjadi teknik yang berharga. Dalam senario ini, terdapat berbilang div .loading dalam kotak lungsur dan tugasnya adalah untuk memulakan pemuatan data semata-mata untuk div yang kelihatan pada masa ini.

Untuk menentukan sama ada div .loading kelihatan, jQuery menawarkan penyelesaian yang boleh dipercayai. Dengan menggunakan fungsi tatal, anda boleh memantau kedudukan tatal pengguna dan menentukan bila mereka sampai ke bahagian bawah halaman.

Begini cara ia berfungsi:

  1. Laksanakan Pendengar Acara Tatal:

    $(window).scroll(function() {
        // Your code here
    });
  2. Semak untuk Mencapai Penghujung:

    if($(window).scrollTop() == $(document).height() - $(window).height()) {
        // Fetch and Append New Data
    }
  3. Ambil dan Tambah Data Baharu (di dalam pernyataan if):

    // Make an AJAX call to retrieve new data
    // Append the retrieved data to the visible .loading div

Dengan melaksanakan teknik ini, anda boleh memuatkan lebih banyak data dengan berkesan hanya apabila . memuatkan div menjadi kelihatan semasa menatal, memastikan pengalaman pengguna yang lancar dan responsif.

Atas ialah kandungan terperinci Bagaimana untuk Memuatkan Lebih Banyak Data pada Tatal Hanya Apabila Div Tertentu Kelihatan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn