0
212
ViewsScript que sigue comprobando si una colección de elementos está completamente cargada
Tengo una página con una larga lista de 880 artículos (y creciendo), que se cargan en lotes. Cuando se carga la ventana, el primer lote tiene alrededor de 52 artículos. Así que me gustaría escribir una función que hasta que la lista no esté completa, muestre un simple descargo de responsabilidad "cargando más..." en la página y siga comprobando con la variable "allItems" hasta que estén completamente cargados. Hasta ahora se me ocurrió esta función, pero solo tiene en cuenta el primer lote cargado de 52 (allItems.length) y luego, por supuesto, cumple su condición y se detiene... (ver capturas de pantalla) ¿Qué estoy haciendo mal? 
$(window).on("load", function() { // get all Items var calItems = $(".collection-item.w-dyn-item"); // count them var calCount = calItems.length; // loaded elements flag var loadedCount = 0; function countItems() { var interval = setInterval(function() { loadedCount++; if (loadedCount > calCount) { $(".load-more-wrapper").hide(); clearInterval(interval); } else { loadedCount++; } }, 1000); } countItems(); });1 answers
Answer question0
Solo por el código que se publica en OP, supongo que la página tarda demasiado en cargarse. Hay una manera de cargar dinámicamente una tonelada de HTML sin ningún retraso perceptible por el ser humano.
obtenga una copia de todos sus divs como una cadena, si cambia, tenga actualizaciones almacenadas en
localStorage(ese es un problema completamente diferente que justifica su propia pregunta). En el ejemplo, tengo 999 divs generados como una cadena:const htmlString = [...new Array(999)].map((_, idx) => { `<div class='dyn'>${idx}</div>`).join('') });A continuación, cree un fragmento de documento . Un fragmento de documento es un elemento "fantasma", no es parte del DOM, pero puede contener elementos. Cuando se agrega al DOM, desaparece y deja a sus hijos dentro del DOM. Esto no toma tiempo en absoluto ya que es solo una sola operación DOM en lugar de la carga de 999 nodos.
let frag = new DocumentFragment();Luego crea un elemento de bloque (en este ejemplo, será una sección). Luego represente esa cadena (es decir
htmlString) en la sección y agregue la sección al fragmento.const sec = document.createElement('section'); sec.innerHTML = htmlString; frag.append(sec);Finalmente, recopile todos los divs en una matriz y luego agregue el fragmento al DOM.
const nodeList = [...sec.querySelectorAll('.dyn')]; document.querySelector('main').append(frag);Anímate y prueba si tienes una colección.
console.log(nodeList[888].textContent);
.as-console-row::after { width: 0; font-size: 0; } .as-console-row-code { width: 100%; word-break: break-word; } .as-console-wrapper { max-height: 1.5em !important; max-width: 50%; margin-left: 50%; } <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style></style> </head> <body> <main></main> <script> const htmlString = [...new Array(999)].map((_, idx) => `<div class='dyn'>${idx}</div>`).join(''); let frag = new DocumentFragment(); const sec = document.createElement('section'); sec.innerHTML = htmlString; frag.append(sec); const nodeList = [...sec.querySelectorAll('.dyn')]; document.querySelector('main').append(frag); console.log(nodeList[888].textContent); </script> </body> </html>