Ajax y Mysqli fue a buscar el contenido de carga automática de desplazamiento queda cuelga / o repeticiones en rollo

votos
0

Estoy tratando de lograr un sistema en el que el contenido (mensajes) de carga ir a buscar automáticamente de MySQL como el usuario se desplaza. He intentado poner un código de Ajax pero muestra algunos errores. A continuación se muestra el código completo.

Mi Código index.php:

<script type=text/javascript src=js/jquery-3.3.1.min.js></script>
<script type=text/javascript>
    $(document).ready(function(){

        var flag = 0;

        $.ajax({
            type: GET,
            url: get-data.php,
            data: {
                'offset': 0,
                'limit': 3
            },
            success: function(data){
                $('.thelisting').append(data);
                flag += 3;
            }
        });

        $(window).scroll(function() {

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

                $.ajax({
                    type: GET,
                    url: get-data.php,
                    data: {
                        'offset': flag,
                        'limit': 3
                },
                success: function(data){
                    $('.thelisting').append(data);
                    flag += 3;
                }
        });

            }
        });
    });

Mi código para hacerse data.php

    if(isset($_GET['offset']) && isset($_GET['offset'])){

        $limit = $_GET['limit'];
        $offset = $_GET['offset'];

        require('connect.php');

        $data = mysqli_query($conn, SELECT * FROM `posts` LIMIT {$limit} OFFSET {$offset});
        while($row = mysqli_fetch_array($data)) {
            echo '<div class=blog-spot><h1>'.$row['posttitle'].'</h1><p>'.$row['postdescription'].'</p><img src=uploads/'.$row['postimagelink'].'/></div>';
        }

    }

El error lo que recibo es ..

  1. Cuando he usado el código de abajo:

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

Las cargas de enviar en un formato de 1, 2, 3, 4, 5, 6, 4, 5, 6, 10, 11, 12, 10, 11, 12, 16, 17 ... aunque debería ser 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ... y así sucesivamente.

Por lo tanto, en lugar de cargar 7, 8, 9 y 13, 14, 15 que repite los 3 publicaciones anteriores. También probé por debajo de la línea pero el mismo tema:

            if($('body').height()-200 <= ($(window).height() + $(window).scrollTop())) {

  1. Y cuando se utiliza el código sin -200 es decir:

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

Después de la carga inicial se retrasa / cuelga, tengo que cambiar el tamaño de la ventana para el próximo 3 de post consecutiva a que aparezca o de lo contrario no aparece el siguiente mensaje 3 y el retraso es más precisa cuando hay una imagen en el post. Aunque la secuencia es exacta.

Yo prefiero el punto 1 ya que la altura de pie de página de la página es bastante grande. Y en el punto 1 no hay retraso, sólo se carga sin problemas pero no alcanza 3 mensajes alternativos y en lugar de repetir la 3 post anterior.

¿Puede alguien ayudarme en la fijación de la edición especial para el punto 1.

Gracias

Publicado el 20/10/2018 a las 10:26
fuente por usuario
En otros idiomas...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more