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.
+=
. 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.+
hay un;
haciendo que losdiv
no se cierren correctamente dentro de los bucles