Sąrašas į tinklelį — efektyviai

4 pamokoje gavom nuotraukų masyvą. Dabar paverskim jį galerija — daug kortelių tinklelyje. Vieną kortelę statyti jau mokam (2–3 pamokos); dabar svarbu padaryti tai efektyviai.

Naivi versija — cikle kiekvieną kortelę iškart įdedi į puslapį:

pictures.forEach(pic => gallery.appendChild(createCard(pic)));   // ← daug perpiešimų

Problema: kiekvienas appendChild gali priversti naršyklę perpiešti (reflow) išdėstymą. Šimtui kortelių — šimtas perpiešimų. Puslapis „trūkčioja".

Sprendimas — DocumentFragment. Tai lengvas, ekrane nematomas konteineris. Sudedi visas korteles į jį, o tada įdedi į puslapį vieną kartą — naršyklė perpiešia vieną kartą:

const frag = document.createDocumentFragment();
pictures.forEach(pic => frag.appendChild(createCard(pic)));
gallery.appendChild(frag);   // ← vienas perpiešimas

Antra tema — nuotraukų krovimas ir pasirodymas. Sena technika „ar elementas matomas?" — klausytis scroll įvykių ir kviesti getBoundingClientRect() kiekvieno slinkimo pikselio metu. Tai vyksta pagrindinėje (main) gijoje šimtus kartų per sekundę ir trūkčioja puslapį.

IntersectionObserver daro tą patį darbą asinchroniškai, ne pagrindinėje gijoje, ir praneša tik tada, kai elementas tikrai kerta ribą. Naudosim jį nuotraukoms „išnyranti" pasirodyti, o kartu paminėsim, kaip juo daromas begalinis slinkimas (infinite scroll). (Nemokamą nuotraukų atidėjimą jau turim iš 2 pamokos — img.loading = 'lazy'.)