Načtení viditelných obrázků

Řekněme, že máme pomalého klienta a chceme ušetřit přenesená data.

Z tohoto důvodu jsme se rozhodli nezobrazovat obrázky hned, ale nahradit je dočasným obsahem, například:

<img src="placeholder.svg" width="128" height="128" data-src="real.jpg">

Na začátku jsou tedy všechny obrázky placeholder.svg. Když stránka doroluje na pozici, z níž uživatel může obrázek vidět, změníme src obrázku na hodnotu uvedenou v data-src, a tak se obrázek načte.

Následuje příklad v iframe:

Při rolování v něm uvidíte, že se obrázky načítají „na požádání“.

Požadavky:

Když se stránka načte, měly by se okamžitě před jakýmkoli rolováním načíst obrázky, které jsou vidět na obrazovce.
Některé obrázky mohou být obvyklé, bez data-src. Na ty by kód neměl sahat.
Když se obrázek načte, neměl by se při dalším rolování načítat znovu.

P.S. Pokud to dokážete, vytvořte pokročilejší řešení, které bude „přednahrávat“ obrázky, které jsou jednu stránku nad nebo pod aktuální pozicí.

P.P.S. Ošetřujte jen svislé rolování, ne vodorovné.

Otevřít pískoviště pro úlohu.

Handler onscroll by si měl zkontrolovat, které obrázky jsou vidět, a zobrazit je.

Chceme ho spustit i ve chvíli, kdy se stránka načte, abychom detekovali okamžitě viditelné obrázky a načetli je.

Kód by se měl spustit, až bude dokument načten, aby měl přístup k celému jeho obsahu.

Nebo jej umístíme na konec <body>:

          // ...obsah stránky je výše...

function jeVidět(elem) {

  let souřadnice = elem.getBoundingClientRect();

  let výškaOkna = document.documentElement.clientHeight;

  // je vidět vrch elementu?
  let jeVidětVrch = souřadnice.top > 0 && souřadnice.top < výškaOkna;

  // je vidět spodek elementu?
  let jeVidětSpodek = souřadnice.bottom < výškaOkna && souřadnice.bottom > 0;

  return jeVidětVrch || jeVidětSpodek;
}

Funkce zobrazViditelné() použije kontrolu viditelnosti, implementovanou ve funkci jeVidět(), a načte viditelné obrázky:

          function zobrazViditelné() {
  for (let obrázek of document.querySelectorAll('img')) {
    let skutečnýZdroj = obrázek.dataset.src;
    if (!skutečnýZdroj) continue;

    if (jeVidět(obrázek)) {
      obrázek.src = skutečnýZdroj;
      obrázek.dataset.src = '';
    }
  }
}

zobrazViditelné();
window.onscroll = zobrazViditelné;
        

P.S. Řešení obsahuje i variantu funkce jeVidět, která „přednahraje“ obrázky, které jsou o jednu stránku nad nebo pod aktuálním rolováním dokumentu.

Otevřít řešení na pískovišti.