Question

0

213

Vistas

Script that keeps checking if a collection of items is fully loaded

I have a page with a long list about 880 items (and growing), which are loading in batches. When the window loads the first batch has about 52 items. So I would like to write a function that until the list isn't complete, shows a simple "loading more..." disclaimer on the page and keeps checking with the "allItems" variable until these are fully loaded. So far I came up with this function, but it just take the first loaded batch of 52 (allItems.length) into account and then of course meets its condition and stops.... (see screenshots) What am I doing wrong?

$(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();
});

about 4 years ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-04T02:01:24.335Z

Just by what code is posted in OP I'm assuming that the page takes too long to load. There's a way to dynamically load a ton of HTML without any human perceptible delay.

get a copy of all of your divs as a string, if it changes have updates stored in localStorage (that is an entirely different problem which warrants it's own question). In the example, I have 999 divs generated as one string:
```
const htmlString = [...new Array(999)].map((_, idx) => {
  `<div class='dyn'>${idx}</div>`).join('')
});          
```
Next, create a document fragment. A document fragment is a "ghost" element, it's not part of the DOM, yet it can contain elements. When it is added to the DOM it disappears and leaves it's children within the DOM. This takes no time at all since it's only a single DOM operation instead of 999 nodes loading.
```
let frag = new DocumentFragment();
```
Then create a block element (in this example, it'll be a section). Then render that string (ie htmlString) in the section and add the section to the fragment.
```
const sec = document.createElement('section');
sec.innerHTML = htmlString;
frag.append(sec);
```

Finally, collect all of the divs into an array and then add the fragment to the DOM.

const nodeList = [...sec.querySelectorAll('.dyn')];
document.querySelector('main').append(frag);

Go ahead and test if you have a collection
```
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>

0

213

Script that keeps checking if a collection of items is fully loaded

1 Respuestas

0

Encuentra empleos remotos

Andres GPT