Autor Zpráva
Tomy
Profil
Ahoj chci se zeptat, jak se dá udělat podmínka pro to, když mám na stránce nějaké obrázky a ony se teprve načítají, tak aby to nesekalo prohlížeč, protože jich je tam hodně, by se tam místo něho objevil gif značící načítání a následně až by se obrázek celý stáhnul by se místo něho objevil ten obrázek.

Chtěl bych to udělat pro to, aby to nevypadalo tak divně, když uživatel otevře tu stránku a postupně se mu tam načítají nějaké obrázky. Konkrétně když jsou tam videa z YouTube, tak to vždycky tu stránku na chvíli zasekne, než si to všechno načte. Děkuji předem :)
user
Profil *
Všechny obrázky by mohly mít:
<img src="loading.gif" data-scr="cesta/k/obrazku.png" class="obrazek">

A potom pomocí js načítat obrázky, např jQuery:
$('.obrazek').each(function(){
  $(this).attr('src', $(this).attr('data-src'));
});  

Netestoval jsem to, ale mělo by to jít.
Tomy
Profil
user:
Jednalo se mi spíše o to, aby byl jeden gif za všechny obrázky. Když má galerie třeba 50 obrázků tak než je načte bude tam kroužit kolečko.
user
Profil *
Tomy:
No tak já bych to řešil přes ajax, tzn místo celé galerie by byl ten gif a javascriptem bych získal pomocí ajaxu src všech obrázků a postupně je načetl do té galerie. Když by byly všechny načtené schoval gif.
Tomy
Profil
user:
Nemám s tím žádné zkušenosti. Nemáš prosím Tě odkaz na nějakou dobrou stránku kde je to pěkně vysvětlené?
Chamurappi
Profil
Reaguji na usera:
a javascriptem bych získal pomocí ajaxu src všech obrázků
Cože? Proč? To jsou snad ty názvy obrázků tak dlouhé, že se vyplatí zjišťovat je dodatečně?

A potom pomocí js načítat obrázky, např jQuery
Na takovou trivialitu tahat jQuery…


Reaguji na Tomyho:
a ony se teprve načítají, tak aby to nesekalo prohlížeč
Myslíš si, že postupné vykreslování obrázků zasekává prohlížeč víc, než animování hromady GIFů? Tomu bych moc nevěřil.

protože jich je tam hodně
Musí jich tam být hodně?

následně až by se obrázek celý stáhnul by se místo něho objevil ten obrázek
Prohlížeče se snaží v zájmu uživatele ukazovat i ne-úplně-dotažené věci, aby načítání působilo rychlejším dojmem. Jen ve velmi výjimečných případech se vyplatí tomuto bránit.

Konkrétně když jsou tam videa z YouTube, tak to vždycky tu stránku na chvíli zasekne
Video z YouTube není obrázek. Viz Hotové řešení lazy-loadingu YouTube videí
Tomy
Profil
Chamurappi:
Ano musí jich tam být hodně, proto hledám tuhle alternativu. A psal jsem, že by tam byl jenom jeden gif, který by ukazoval, že se to načítá. Ne na každý obrázek jeden, ale jeden na všechny.
Keeehi
Profil
Tomy:
Ano musí jich tam být hodně
Mysím, že jsi to nepochopil. I když budeš mít těch obrázků třeba 1000, nikdy je nevidíš všechny. Vidíš jich třeba 30 protože se ti jich víc na monitor nevejde. Takže by mělo stačit načíst jen pár obrázků co může uživatel vidět a pak teprve načítat ty další. Nejlépe, až když už budou téměř potřeba. Podobně, jako facebook načítá příspěvky. Taky jich poprvé stáhne jen pár a jak postupně scrolluješ, tak načítá další a přidává je na konec.
Tomy
Profil
Keeehi:
No včera jsem nad tím taky přemýšlel. Byla by to ta lepší varianta, ale nevím jak to udělat. Zkusím to pohledat.
Keeehi
Profil
Říká se tomu "infinite scroll".

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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