Új hozzászólás Aktív témák

• disy68 aktív tag

  #8231

  #8230 Taci

  2021-03-03 23:01:48

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  disy68

  aktív tag

  #8230 Taci

  #8230 Taci

  Ha már feljött a window load event témája:

  Az oldalamon infinite scroll-lal töltöm be a tartalmat. Egyetlen egy oldal, ahol görgetéssel jön az újabb és újabb tartalom.
  Amikor betölt az oldal, ott meg tudom jeleníteni a töltő ikont addig, amíg az oldal teljesen be nem tölt.
  document.readyState === "complete" vagy akár a window.onload is. (A logból és a leírásból látom, hogy a window.onload adja a pontosabb állapotot, de ez mindegy is most.)

  document.onreadystatechange = function() { 
    if (document.readyState !== "complete") { 
        spinnerShowHideToggle("spinnerShow");
    } else { 
        spinnerShowHideToggle("spinnerHide");
    } 
};

  A gondom az, hogy mivel ugye az oldal maga már betöltött, ezért ahogy folyamatosan fűzöm hozzá az újabb és újabb tartalmakat, az már nem számít bele az oldal betöltésébe, így a fentieket egyáltalán nem triggereli.

  Hogyan tudom az így pluszban hozzá fűzött tartalmaknál is megjeleníteni a töltő ikont addig, amíg az elemekhez tartozó képeket be nem tölti teljesen?

  Van egy sablon html feed_item, azt tölti fel a szükséges adatokkal minden új elemnél újra és újra. Ezeket az img tageket kellene valahogy figyelnem? Vagy mi ennek a jó módja?
  Vagy van valami event, amit lehetne figyelni?

  Köszi!

  Amikor lekéred az új adatot, amivel bővíted az oldalt, akkor megjeleníted a spinnert. Amikor betöltött az adat, akkor berakod a DOM-ba, ahova annak kerülnie kell.

  Miután ez megvan, akkor ahova került az új tartalom, megnézed a tartalomban van-e új img, ezeket kigyűjtöd.
  
  Itt lehet akár két lehetőség is
  - Megszámolod mennyi van, majd feliratkozol a képek load és error eseményeire és amikor bármelyik bekövetkezik, akkor kivonsz egyet a számlálóból, ha elérted a nullát, akkor elrejted a spinnert.

  - Vagy a képeket beburkolod egy-egy Promise-ba a resolve/reject a kép load és error eseményeire következik be. Bevárod az összes Promise-t és elrejted a spinnert.
  
  ha van egy images nevű tömböd, a képekkel, abból így lesz egy promise lista:
  const imagePromises = images.map(image =>
new Promise((resolve, reject) => {
        image.onload = () => {
        console.debug('image loaded', image);
          resolve(image);
        };
        image.onerror = () => {
        console.error('image not loaded', image);
          reject(image);
        };
      }));

Új hozzászólás Aktív témák