Autor Zpráva
akuzakl
Profil *
Dobrý den,

snažím se optimalizovat svůj web pro mobilní zařízení, aby se načítal rychleji uživatelům s pomalým připojením. Dle Google PageSpeed Inside mi vcelku zásadně ovlivňuje načítání embedovaného videa z YouTube. Postupoval jsem podle tohoto návodu , ale zasekl jsem se u JavaScriptu. Mohl by mi, prosím, někdo vysvětlit, jak vytvořím IntersectionObserver a přidělím mu target element? Případně mě alespoň odkázal na nějaký článek, který by mi tento problém vysvětlil?

Zatím jsem to pochopil tak, že

všechno zkopíruju do lazy-load.js, takže bude vypadat takto?

// create a new Intersection Observer
let observer = new IntersectionObserver(callback);

// the element that you want to watch
const element = document.querySelector('iframe');

// register the element with the observe method
observer.observe(element);

Do hlavičky stránky jsem umístil uvedený tag a ověřil, že skutečně odkazuje na lazy-load.js, ale video v iframe mi zmizí hned po tom, co přepíšu src na data-src a neukáže se ani po umístění tagu do hlavičky stránky.
Taps
Profil
akuzakl:
Hotové řešení lazy-loadingu YouTube videí
iiic
Profil
Podobnou věc jsme tvořil… widget co umístí nejnovější video z Youtube kanálu do stránky.

Píšu to proto že je to taktéž tvořené s ohledem na výkon a je tam taktéž použitý lazy loading, z API se stáhne náhledový obrázek a teprve po kliku na přehrávání se obrázek nahradí za pravé video a spustí se přehrávání.

Kód je na githubu, třeba to pomůže github.com/iiic/YoutubeWidgetic

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0