[CSS/JS] Chrome a hodně velkých obrázků

[PiranhaGreg]

Mám webovky i s nějakýma albama. Problém je, že u obrázků mám k dispozici jen jejich velkou verzi (průměrně 1600x1200). Přes CSS je zmenšuji na nějakých 300x300 pixelů. IEčko i Firefox s tím nemají problém a stránka je krásně plynulá. Ale u Chromu se už při malém množství miniatur nesnesitelně seká. Čím to je? Jak to vyřešit? Připomínám že miniatury k dispozici prostě mít nemůžu...

EDIT: Tady o tom i píšou...
http://code.google.com/p/chromium/issue ... l?id=92812

[x-rated]

v chromu je to asi nejznatelnější, ale jenom napoprvý a při rychlym posouvání posuvníkem, ve firefoxu je to napoprvý znát o něco míň, ale taky trochu, překvapivě exploshit si s tim poradí nejlíp... protože se to ale děje právě jenom jednou, než se dojede až nakonec (a pokud se jede pomalu - např. přes kolečko, tak vůbec), tak bych to neřešil, třeba to časem opravěj

[PiranhaGreg]

No mě se to seká i po několikátým rolování. A takhle to působí rozhodně dost blbě . Není třeba nějaká JS ulitka, která by přes web workera převedla obrázky do menších?

[gandor]

Asi hladas nieco ako toto...

[PiranhaGreg]

Jop, s tímhle to snad půjde. Snad někomu neupeču procesor . Díky

[Zwick]

Jak někdo může nadávat na flash a podporovat tohle...

[PiranhaGreg]

Do budoucna je HTML5 v poho. Jen teď to ještě někde dost drhne .

[gandor]

Netradicne poziadavky pytaju netradicne riesenia. Netusim co by sa muselo diat, aby som nemohol posielat ako nahlady PHP generovane thumbnails, ale ked to inak skutocne nejde...

[kohutisko]

Preco preboha nezmensujes obrazky na serveri? Alebo teda aby som to povedal recou IT experta, ktorej podla vsetkeho rozumies lepsie:

Kód: Vybrat vše

if (Image.downsizeOnClient() != String.concat("sh", "it"))
    Write("WTF!?");

[PiranhaGreg]

Protože ten server nebyl obdařen zrovna velkým výkonem. Už teď tam při tom požadavku parsuju docela velkej html soubor, kde jsou odkazy na ty obrázky. A ještě je všechny stahovat a zmenšovat, to by asi nešlo. Jsem psal adminovi webhostingu ať mi přidá do php.ini allow url fopen = On, že toho nebudu zneužívat a teď bych tady najednou stahoval tunu obrázků z cizích domén. Ať si je hezky stáhne klient .

[kohutisko]

tak to mas recht. pristup "at si to resi klient" je presne to, co robi dobru webku dobrou

[PiranhaGreg]

pfff... samozřejmě bych to radši vyřešil jinak, jenže když to jinak asi nejde... Měl jsem ještě nápad, že bych dělal tuhle těžkou práci na jiným, placeným webhostingu, pro kterej by to byla hračka, ale zas ten projekt nechci mít tak rozlezlej po serverech.

A načítání velkých obrázků na straně klienta zas taková tragédie není. Dal jsem tam nějakou cool animaci, že to pomalejší načítání vypadá přirozeně a když si je pak bude někdo rozklikávat, tak už je aspoň bude mít uložený v cache .

[Vebloud]

Hmm, víš, že publikování obsahu, který není tvůj na svém webu můžeš porušovat autorské právo? Respektive s velkou pravděpodobností porušuješ?

[PiranhaGreg]

Ten obsah je ale můj, vyfotil jsem ho .

[gandor]

Ono to zmensovanie obrazkov mozno jednorazovo berie vecsi vykon, ale v sucte by si server zatazil menej. Lebo... Kolko vykonu je zapotreby pre prenesenie obrazku 300x300 oproti 1600x1200? No 21x menej prenesenych dat (co berie aj vykon aj linku). A v reali bezne ludia rozkliknu len zopar obrazkov...
Zmensenie obrazkov na servery je pritom vec jednorazova (staci to nechat spravit 1x pri uploade obrazku resp. pri vyziadani ak sa nenajde uz hotovy obrazok).

Jo a este s jednou vecou by som sa pohral keby som mal na to mal vela casu a chuti. To je ale skvor len taka zaujimavost...
PNG obrazky maju taku vlastnost, ze mozu byt interlaced. V tedy zaberaju asi o 1/3 viac miesta, ale umoznuju postupne docitavanie. Pokial by si nechal na nahlady docitat len 1/8 obrazku a tu zmensil cez CSS tak by to mohlo mat celkom pekny vysledok. Potom pri dokliknuti staci dohodit zvysnich 7/8 obrazku.
Problem je, ze IE nezobrazuje ciastocne natiahnute interlaced obrazky pekne (neviem co to spravy pri zmenseni cez CSS), dalej taketo nacitavanie treba robit cez javascript a do src treba davat realne data obrazku base64-enkodnute (takze ak nechces mat overheat, tak to treba dalej doprogramovavat). A tento sposob nepodporuje cacheovanie, takze to treba skombinovat este z nejakou HTML5 technologiou pre ukladanie dat na klientovy a naslednou detekciou ci uz dany obrazok u seba nemas...