0

Estoy haciendo una consulta de 10,000 registros que cada uno tiene una URL de imagen distinta. Todas estas se pintan en en el Front, el problema es que se alenta mucho la página, esta es la función

<div id="parentDiv" style="height:800px;overflow-y:scroll;"></div>    
<script>
$(function(){
      $.ajax({
        url:'back.php',
        method:'POST',
        success:function(r)
        {
          var x = "";
          for (var i = 0; i < r.length; i++) 
          {
              x+='<div>' + 
                '<img src="https://route.com/image_'+ r[i] +'" />';
              '</div>';
          }
          $('#parentDiv').html(h);
        }
      });
    });
</script>

Dentro del #parentDiv tiene una altura sólo para poder visualizar 4 Divs que contienen imágenes, pero sigo con el problema, las imagenes se siguen pidiendo a sus respectivas URL y eso hace que la página en ocaciones colapse o deje de responder.

Como puedo hacer para que, si los Divs dentro del parentDiv no son visibles no se haga el request de dichas imagenes, a menos que se haga un scroll.

Se me ocurrió algo así:

$(function(){
  var res,flag,x,y;  
  $.ajax({
    url:'back.php',
    method:'POST',
    success:function(r)
    {
      var res = r;
      for (var i = 0; i < 20; i++) 
      {
          flag = i;
          x+='<div>' + 
            '<img src="https://route.com/image_'+ r[i] +'" />';
          '</div>';
      }
      $('#parentDiv').html(x);
    }
  });

  $('#parentDiv').on('scroll',function(){
    for (var i = flag; i < 20; i++) 
    {
        flag = i;
        y+='<div>' + 
          '<img src="https://route.com/image_'+ res[i] +'" />';
        '</div>';
    }
    $(this).append(y);
  });
});

El problema es que sigue cargando todas.

Agradezco sus sugerencias.

5
  • ¿Por qué usas POST?
    – fredyfx
    Commented el 27 oct. 2017 a las 23:47
  • No se si agregue valor esta pregunta al problema real. Utilizo POST por que así está programado el Back para la recepción de datos (En caso de que lleve) Commented el 27 oct. 2017 a las 23:53
  • Quizás no a la pregunta, a lo que sí agrega valor es a la manera correcta de desarrollar en la web. El verbo HTTP que deberías usar es GET porque estás solicitando información, no hay data que estés envíando al servidor.
    – fredyfx
    Commented el 28 oct. 2017 a las 0:02
  • 2
    Te recomiendo concatenar tus strings (cadenas) con +=. Hay un post relacionado a ello en stackoverflow.com/questions/16696632/…, está en inglés. Puedes consultar a los resultados de una prueba en jsperf.com/join-concat/2. Por otro lado, en modo general, la observación que hace @fredyfx es correcta. Commented el 28 oct. 2017 a las 0:17
  • 1
    Hay un par de fallos en el código, donde debería haber un + hay un ; haciendo que los div no se cierren correctamente dentro de los bucles
    – Alvaro Montoro
    Commented el 28 oct. 2017 a las 0:21

1 respuesta 1

0

Simplemente chequea con JQuery que llegaste al final de la pantalla y entonces ejecuta otras llamadas de ajax que hagan append de los demas elementos.

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           // aqui la llamada de ajax para llenar la pagina de mas información
    }
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.