Dynamiczne pobierane danych w połowie strony

0

Cześć

robię stronę, w której dane podczas scrollowania będą płynnie ładowane z mysql. Wziąłem kod z tej strony:
http://tutorialsmint.com/tutorial/load-more-data-while-scrolling-page-down-with-jquery-ajax-and-php-1546945742
muszę go zmienić, żeby dane ładowały się, gdy użytkownik będzie w połowie strony a nie na samym jej końcu

Próbowałem zmienić

if ($(window).scrollTop()  ==  $(document).height()  - $(window).height()   ) {

na

if ($(window).scrollTop() * 1.5  >= $(document).height()  - $(window).height()   ) {

dane zaczęły ładować się w dobrym miejscu, tylko teraz pobierają się kilkukrotnie takie same (żądanie jest wysyłane dopóki dane nie są wyświetlone)

stąd pytanie, czy można dopisać "przełącznik" który będzie kazał wykonywać kod jednokrotnie? czy trzeba to jakoś inaczej zrobić?

1

Twój zapis sprawia, że ajax wykonywany jest wielokrotnie - stąd masz zdublowane dane.
$(window).scrollTop() - oznacza "odległość" od góry
$(document).height() - wysokość okna przeglądarki

Tutaj masz demo z Twojego wzorca
a) https://jsfiddle.net/yupzg2eb/

Tutaj Twoje
b) https://jsfiddle.net/gnfqeca4/

Zauważ, że dla podpunktu a) kod ajax (czyli w moich przykładach "odległość" od góry) wykonuje się tylko raz przy dobiciu scrollem do dolnego punktu.
W Twoim przykładzie wykonuje się wielokrotnie - stąd zdublowane wartości.

Zamiast mnożyć, bardziej pokombinuj z zapisem:

if ($(window).scrollTop() + N >= $(document).height() - $(window).height() ) { // gdzie N to wartość w px
https://jsfiddle.net/ujr6f0oc/

0

Dzięki za odpowiedź
Staram się unikać wartości w pikselach, bo daje to dość różny efekt w zależności od ekranu. W obu przykładach ajax też jest wykonywany wielokrotnie :)

0

@Q faktycznie mój błąd.

sprawdź może to Ci pomoże?
https://jsfiddle.net/eb4kc9gv/

zamiast w setTimeout(function(){} linijkę $(window).on('scroll', handleScroll); wykonaj sobie po zakończeniu AJAX'a (success)

0

Wygląda spoko, ale chyba źle go wklejam. Możesz napisać proszę jak go tutaj dodać?

      <script>
            $(document).ready(function () {
                $(window).scroll(function () {
                    if ($(window).scrollTop() >= ($(document).height() - $(window).height())/2 ) {
                        $("#msg_loader").show();
                        var msg_id = $(".message_box:last").data("id");
                        
                        $.ajax({
                            type: "POST",
                            url: "fetch.php",
                            data: {msg_id: msg_id},
                            cache: false,
                            success: function (data) {

                                $(".message_box:last").after(data);
                                $("#msg_loader").hide();
                            }
                        });
                    }
                });
            });
        </script>
1
$(document).ready(function () {
$(window).on("scroll", handleScroll);           
function handleScroll() {
  if ($(window).scrollTop() >= ($(document).height() - $(window).height())/2 ) {
 	  $(window).off('scroll', handleScroll);
    $("#msg_loader").show();
    var msg_id = $(".message_box:last").data("id");

    $.ajax({
      type: "POST",
      url: "fetch.php",
      data: {msg_id: msg_id},
      cache: false,
      success: function (data) {
				$(window).on('scroll', handleScroll);
        $(".message_box:last").after(data);
        $("#msg_loader").hide();
      }
    });
  }
}
});
0

Działa świetnie, dzięki :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1