jQuery memuat lebih banyak data pada gulir

148

Saya hanya ingin tahu bagaimana saya bisa menerapkan lebih banyak data pada gulir hanya jika div.loading terlihat.

Biasanya kita mencari tinggi halaman dan tinggi gulir, untuk melihat apakah kita perlu memuat lebih banyak data. tetapi contoh berikut sedikit rumit dari itu.

Gambar berikut adalah contoh sempurna. ada dua .loading div di kotak drop down. Ketika pengguna menggulir konten, mana yang terlihat itu harus mulai memuat lebih banyak data untuk itu.

masukkan deskripsi gambar di sini

Jadi bagaimana saya bisa mengetahui apakah. Memuat div belum terlihat oleh pengguna atau tidak? Jadi saya bisa mulai memuat data hanya untuk div itu.

javascript  jquery  ajax  scroll 
— Basit
sumber

Jawaban:

286

Di jQuery, periksa apakah Anda telah menekan bagian bawah halaman menggunakan fungsi gulir. Setelah Anda menekan itu, buat panggilan ajax (Anda dapat menampilkan gambar pemuatan di sini sampai respons ajax) dan dapatkan set data berikutnya, tambahkan ke div. Fungsi ini dijalankan saat Anda menggulir ke bawah halaman lagi.

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           // ajax call get data from server and append to the div
    }
});
— deepakssn
sumber
5
Solusi ini hebat dan paling sederhana;) Anda dapat meningkatkan kode ini dengan baris berikut dalam panggilan ajax: new_element.hide().appendTo('.your_div').fadeIn(); $(window).scrollTop($(window).scrollTop()-1);Baris pertama menambahkan elemen dengan cara yang baik, yang kedua memastikan bahwa fungsi Anda tidak pernah berhenti di bagian bawah halaman.
— alekwisnia
34
Saya mendekati ini dengan cara yang sama, memperhitungkan fakta bahwa Anda selalu memiliki barang sewenang-wenang (navigasi) di bagian bawah halaman Anda, dan Anda benar-benar ingin memuat sebelum Anda mencapai bagian bawah. Jadi fungsi batinku adalah: var end = $("#BottomThing").offset().top; var viewEnd = $(window).scrollTop() + $(window).height(); var distance = end - viewEnd; if (distance < 300) // do load
— Jeff Putz
2
Ryan Bates memiliki episode yang luar biasa tentang ini: railscasts.com/episodes/114-endless-page . Ada juga versi revisi tetapi Anda mungkin perlu berlangganan.
— Vee
4
Jika seseorang ingin tahu apakah pengguna telah menggulir ke bawah, ia dapat menggunakan ini jika kondisi di dalam jika itu ditampilkan di sini: if ($ (window) .scrollTop () + $ (window) .height () == $ (dokumen ) .height ()) {console.log ('Bergulir ke bawah!'); }
— Roy Shoa
5
Jawaban ini bukan yang saya tanyakan dalam pertanyaan.
— Basit
84

Pernahkah Anda mendengar tentang plugin jQuery Waypoint .

Di bawah ini adalah cara sederhana untuk memanggil plugin waypoint dan membuat halaman memuat lebih banyak Konten begitu Anda mencapai bagian bawah pada scroll:

$(document).ready(function() {
    var $loading = $("<div class='loading'><p>Loading more items&hellip;</p></div>"),
    $footer = $('footer'),
    opts = {
        offset: '100%'
    };

    $footer.waypoint(function(event, direction) {
        $footer.waypoint('remove');
        $('body').append($loading);
        $.get($('.more a').attr('href'), function(data) {
            var $data = $(data);
            $('#container').append($data.find('.article'));
            $loading.detach();
            $('.more').replaceWith($data.find('.more'));
            $footer.waypoint(opts);
        });
    }, opts);
});
— defau1t
sumber
8
ada kemungkinan demonstrasi melalui jsfiddle?
— cwiggo
4
saran yang bagus tapi terburuk js plugin waypoint .. membuang banyak waktu saya .... jawaban di bawah ini jauh lebih cepat dan lebih cepat
— Karan Datwani
2
Jawaban manakah di bawah ini yang Anda temukan sebagai yang terbaik?
— wuno
Anda dapat merujuk ke jawaban saya untuk implementasi Lazy Loader. stackoverflow.com/a/45846766/2702249
— Om Sao
9

Berikut ini sebuah contoh:

  1. Saat menggulir ke bawah, elemen html ditambahkan. Mekanisme penambahan ini hanya dilakukan dua kali, dan kemudian sebuah tombol dengan warna powderblue akhirnya ditambahkan.

<!DOCTYPE html>
<html>
<head>
    <title>Demo: Lazy Loader</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style>
        #myScroll {
            border: 1px solid #999;
        }

        p {
            border: 1px solid #ccc;
            padding: 50px;
            text-align: center;
        }

        .loading {
            color: red;
        }
        .dynamic {
            background-color:#ccc;
            color:#000;
        }
    </style>
    <script>
		var counter=0;
        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height() && counter < 2) {
                appendData();
            }
        });
        function appendData() {
            var html = '';
            for (i = 0; i < 10; i++) {
                html += '<p class="dynamic">Dynamic Data :  This is test data.<br />Next line.</p>';
            }
            $('#myScroll').append(html);
			counter++;
			
			if(counter==2)
			$('#myScroll').append('<button id="uniqueButton" style="margin-left: 50%; background-color: powderblue;">Click</button><br /><br />');
        }
    </script>
</head>
<body>
    <div id="myScroll">
        <p>
            Contents will load here!!!.<br />
        </p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
    </div>
</body>
</html>
Luaskan cuplikan

— Om Sao
sumber
@RohanAshik: Saya baru saja memeriksa. Bekerja. Coba gulir ke bawah sampai akhir.
— Om Sao
@Om Prakash Sao Ini berfungsi dengan baik di sini, tetapi ketika saya menjalankan kode ini dengan luhur maka acara tersebut berfungsi ketika bilah gulir mencapai bagian atas bukan bagian bawah, \
— geeky
8

Jawaban yang diterima dari pertanyaan ini memiliki beberapa masalah dengan chrome ketika jendela diperbesar ke nilai> 100%. Berikut adalah kode yang direkomendasikan oleh pengembang chrome sebagai bagian dari bug yang saya ajukan pada hal yang sama.

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() >= $(document).height()){
     //Your code here
  }
});

Sebagai referensi:

Pertanyaan SO terkait

Bug Chrome

— Prasanth KC
sumber
7

Jika tidak semua dokumen Anda bergulir, katakanlah, ketika Anda memiliki scrolling divdi dalam dokumen, maka solusi di atas tidak akan berfungsi tanpa adaptasi. Berikut cara memeriksa apakah scrollbar div telah menyentuh bagian bawah:

$('#someScrollingDiv').on('scroll', function() {
    let div = $(this).get(0);
    if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
        // do the lazy loading here
    }
});
— Coprolal
sumber
Terima kasih kawan! Ini sangat membantu saya :)
— Raru
1

Saya menghabiskan beberapa waktu mencoba menemukan fungsi yang bagus untuk membungkus solusi. Bagaimanapun, berakhir dengan ini yang saya rasa merupakan solusi yang lebih baik ketika memuat beberapa konten pada satu halaman atau di seluruh situs.

Fungsi:

function ifViewLoadContent(elem, LoadContent)
    {
            var top_of_element = $(elem).offset().top;
            var bottom_of_element = $(elem).offset().top + $(elem).outerHeight();
            var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
            var top_of_screen = $(window).scrollTop();

            if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
            if(!$(elem).hasClass("ImLoaded"))   {
                $(elem).load(LoadContent).addClass("ImLoaded");
            }
            }
            else {
               return false;
            }
        }

Anda kemudian dapat memanggil fungsi menggunakan jendela pada gulir (misalnya, Anda juga dapat mengikatnya ke klik dll. Seperti yang saya juga lakukan, maka fungsinya):

Menggunakan:

$(window).scroll(function (event) {
        ifViewLoadContent("#AjaxDivOne", "someFile/somecontent.html"); 

        ifViewLoadContent("#AjaxDivTwo", "someFile/somemorecontent.html"); 
    });

Pendekatan ini juga harus berfungsi untuk menggulir divs dll. Saya harap ini membantu, dalam pertanyaan di atas Anda dapat menggunakan pendekatan ini untuk memuat konten Anda dalam beberapa bagian, mungkin menambahkan dan dengan demikian menggiring bola memberi makan semua data gambar daripada umpan massal.

Saya menggunakan pendekatan ini untuk mengurangi overhead pada https://www.taxformcalculator.com . Ini adalah trik, jika Anda melihat situs dan memeriksa elemen dll. Anda dapat melihat dampak pada pemuatan halaman di Chrome (sebagai contoh).

— Pete - iCalculator
sumber
1

Memperbaiki jawaban @deepakssn. Ada kemungkinan Anda ingin data dimuat sedikit sebelum kita benar-benar menggulir ke bawah .

var scrollLoad = true;
$(window).scroll(function(){
 if (scrollLoad && ($(document).height() - $(window).height())-$(window).scrollTop()<=800){
    // fetch data when we are 800px above the document end
    scrollLoad = false;
   }
  });

[var scrollLoad] digunakan untuk memblokir panggilan sampai satu data baru ditambahkan.

Semoga ini membantu.

— Moonis Abidi
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.