Rumah > hujung hadapan web > tutorial js > 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
Lepaskan: 2024-11-06 01:01:02
asal
811 orang telah melayarinya

 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
    });
    Salin selepas log masuk
  2. Semak untuk Mencapai Penghujung:

    if($(window).scrollTop() == $(document).height() - $(window).height()) {
        // Fetch and Append New Data
    }
    Salin selepas log masuk
  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
    Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan