Tengo una galería de fotos que incluye imágenes que se subirán continuamente. La matriz PHP se ha convertido/codificado en una matriz JSON para que pueda manipular los datos con JavaScript.
Idealmente, me gustaría hacer clic en un botón ("Siguiente conjunto" en el ejemplo de CodePen) y cargar el siguiente conjunto (de 2) imágenes en miniatura. Esto es en un esfuerzo por no cargar todas las imágenes a la vez, que podrían ser cientos.
Problema: no puedo descifrar cómo dividir dinámicamente la matriz al hacer clic (las siguientes 5 imágenes). Por supuesto, puedo cargar, digamos, 2 a la vez:
myArray.slice(0,2); myArray.slice(3,5);Sin embargo, esto no funcionará porque las imágenes se agregarán continuamente a la galería. Además, tendría que tener demasiados conjuntos de los anteriores para seguir cortando 5 a la vez.
Yo he tratado:
for y bucles $.eachEsencialmente, necesito poder mover el índice de inicio y final del segmento (por ejemplo) 2 al hacer clic. En este momento, sigue cortando las mismas dos imágenes porque el corte no es dinámico.
Aquí está mi CodePen
No creo que haya una manera de hacer exactamente lo que quieres, pero puedes hacer un seguimiento de dónde estabas en la matriz y hacer un corte desde allí, así:
var nextSet = myArray.slice(lastIndex, lastIndex + 2); Reemplace su click() con esto (incluida la declaración de lastIndex ) para probarlo:
var lastIndex = 0 $('.button').click(function() { var nextSet = myArray.slice(lastIndex, lastIndex + 2); lastIndex += 2; for (var i = 0; i < 2; i++) { var li = $('<li/>').attr('role', 'menuitem').appendTo('.myList').append('<img src=' + nextSet[i] + '>'); } }); Tenga en cuenta que he movido la línea slice() fuera del bucle for . No hay necesidad de dividir una nueva matriz para cada iteración.
Aquí hay un CodePen usando .slice() .
Un método alternativo es usar shift() para despegar el primer elemento de la matriz con cada iteración:
var nextItem = myArray.shift() Sin embargo, esto es destructivo (elimina el elemento de la matriz original), por lo que primero deberá hacer una copia de la matriz original si desea usarla para cualquier otra cosa. Reemplace su click() con:
$('.button').click(function() { for (var i = 0; i < 2; i++) { var nextItem = myArray.shift(); var li = $('<li/>').attr('role', 'menuitem').appendTo('.myList').append('<img src=' + nextItem + '>'); } }); Aquí hay un CodePen usando .shift() .
tu problema es simple, creo. haces un corte y siempre obtienes la misma matriz
var array = [0,1,2,3,4,5]; let newArray1 = array.slice(0,2); // returns a new array let newArray2 = array.slice(0,2); // returns the same new array for(var i = 0; i < 2; i = i+2) { result = array.slice(i, i+2); console.log(result); }