Wymuszenie wyświetlenia wszystkich "leniwych" obrazków

Modne jest obecnie stosowanie lazy loading.

Interesuje mnie odkręcenie tego efektu i sprawienie, żeby strona wyświetliła mi wszystko, co fabryka dała. Np., żeby móc to sobie zapisać.

Najsensowniejsze, co mi przyszło do głowy, to:

• złapać wszystkie obrazki na stronie,
• przeskalować do 1px × 1px,
• ustawić css-em zafiksowane w widocznym obszarze,
• a później to wszystko odkręcić, np. usuwając z nich klasę, która to wymusiła.

Jakieś inne pomysły?

Na mechanizmy oparte na onscroll chyba nie da się napisać żadnego innego, uniwersalnego rozwiązania.

Ale na te bazujące na IntersectionObserver może coś dałoby się wymyślić i przekonać obserwatora, że wszystkie obrazki są widoczne.
Chociaż właściwość intersectionRatio wydaje się być tylko do odczytu.

Dobra, wymyśliłam. Wystarczy wykorzystać fakt, że powszechną praktyką jest tu umieszczanie wartości src w data-src;

var images = document.getElementsByTagName('img');
for(var i = 0; i < images.length; i++) {
  var src   = images[i].getAttribute("data-src");
  /* --- jeśli lazy --- */
  if (src!==null) {
    images[i].src = src;
    console.log(src);
  }
  /* --- /jeśli lazy --- */
}