| Autor | Zpráva | ||
|---|---|---|---|
| Zdendaking Profil |
#1 · Zasláno: 2. 10. 2012, 14:06:31 · Upravil/a: Moderátor (editace znemožněna) 3. 10. 2012, 12:39:43
Neví někdo jak v čistém CSS zobrazit v určitém divu preloadnute fotky z neviditelného divu na konci stránky ( CSS pro div #preload{ position: absolote; overflow: hidden; left:-9999; top:-9999; height:1; width:1;}? Potřebuji ty fotky načist do listu někde na stránce a jaksi to nejde rozchodit. Zkoušel jsem kotvy na jednotlivé img v divu "preload", ale to mi nějak nefunguje. Pokud jsou obrázky odkazovány přímo v listu, tak není problém, až na čekání, než se načtou na klienta. Tomu bych se chtěl právě preloadem vyhnout. Podotýkám, že jde jen o CSS ( bez JavaScriptu nebo jQuery, tak je zadání ). Stačil by i jen odkaz na nějaké stránky s touhle problematikou, ale prolezl jsem i zdrojáky mnoha galerií a všude jen s JavaScriptem nebo jQuery.
S díky Zdeněk Moderátor Chamurappi: Vůbec nechápu, proč byl nadpis anglicky. Přeložil jsem ho.
|
||
| panther Profil |
#2 · Zasláno: 2. 10. 2012, 14:27:37
Zdendaking:
nejak nechapu, co ma byt cilem. Preload obrazku je mi jasny, z dalsiho popisu jsem ale zmaten. Jake obrazky chces kde preloadovat? Proc hovoris o „odkazováni přímo v listu“ (predpokladam background v CSS), kdyz se s nejvetsi pravdepodobnosti jedna o obrazky (img) a ne pozadi? Jak si predstavujes kotvy na obrazky v elementu, ktery je kdesi a hlavne ma rozmer 1x1px? |
||
| margin Profil * |
#3 · Zasláno: 2. 10. 2012, 14:53:56
Taky nechápu, o co se pokoušíš a na jaký problém jsi narazil.
Hledáš tohle http://qu.wu.cz/webtest/obrazky-a-overflow.htm? |
||
| Zdendaking Profil |
#4 · Zasláno: 3. 10. 2012, 11:42:25
Díky za reakci,
ad margin: tenhle uvedený příklad je řešen přes "iframe" a to není moc praktické, pokud chci zobrazit fotku a přidat jí např. rámeček. Tam se musí načíst do externí HTML šablony a tu teprve načíst do iframu (Opera např. tvrdošíjně vykresluje přesah v iframu bílou barvou a lze to změnit jen přes background té externí html stránky s fotkou ). Takže ve fotogalerii s x počtem fotek je nutno vytvořit x počet httml stránek, což nepovažuji za praktické. ad panther: Abych to upřesnil, jde o dynamicky skládanou fotogalerii přes PHP na servru. A pro urychlení na klientovi chci preloadnout fotky do jiz vyse uvedeneho neviditelneho divu umisteneho na konci html stránky, aby se napřed načetl interface a nezdržovalo se načítáním fotek ( tuto techniku jsem našel v několika tutoriálech na preload bez javascriptu..) To je vše ok. ale teď je samozřejmě potřebuji nějak dostat do viditelné podoby na stránku a to je ten problém, který nikde nemohu v praktickém řešení najít. Asi jsem se špatně vyjádřil s těmi kotvami ( to ne v CSS,ale samozřejmě v html kódu). Vzhledem k tomu, že se stránky dynamicky skládají přes PHP, tak ta technika s obrázky v background v CSS není reálná, protože na servru nemůžu pro každou další sadu fotek generovat css soubor s odkazy na umístění fotek a následně odesílat na klienta, alespoň jsem na to nikde nenarazil. S pozdravem Zdeněk |
||
| panther Profil |
#5 · Zasláno: 3. 10. 2012, 11:46:05
Zdendaking:
„Vzhledem k tomu, že se stránky dynamicky skládají přes PHP, tak ta technika s obrázky v background v CSS není reálná“ nejen, ze je nerealna, nebyla by ani spravna. Obrazek je obrazek a pozadi je pozadi. Chapu dobre, ze mas nekde nahore na strance fotogalerii, ale chces, aby se nacetla jako posledni? To znamena, ze se nacte stranka, nekde dole se nactou obrazky a po jejich nacteni se zobrazi v galerii nahore? |
||
| Zdendaking Profil |
#6 · Zasláno: 3. 10. 2012, 11:57:00
ad panther
Přesně, z PHP budu generovat lištu thumbs náhledů s odkazem na preloadnuté obrázky, které jsou již v cashi na klientovy přes ten neviditelný div a já se na ně potřebuji nějak odkázat a zobrazit je do absolutní pozice někde na stránce ( prakticky interface všech běžných fotogalerií ). Takže problém je, jak je z té cache dostat na stránku. Zdeněk |
||
| margin Profil * |
#7 · Zasláno: 3. 10. 2012, 12:13:18
Zdendaking:
Na výše odkázaném příkladě žádný IFRAME není. S orámováním obrázků není problém. „Takže problém je, jak je z té cache dostat na stránku.“ Nechápu dotaz, ale pomohlo by mi, kdybys napsal, jak zmíněné obrázky dostaneš na stránku bez té keše. |
||
| Zdendaking Profil |
#8 · Zasláno: 3. 10. 2012, 18:05:27
ad margin
Stále si asi nerozumíme. Ty obrázky jsou na klientovi, ale neumím je zobrazit. Raději přiložím odkaz na preload s kterým se snažím pracovat: http://perishablepress.com/pure-css-better-image-preloading-without-javascript/ Takže jsou už načtené v <div id="preloaded-images">, než se divák rozkouká po stránce a pak lze předpokládat rychlé zobrazení i u větších fotek. A mě jde o to jak se na ně v dalším divu <div id="fotogalerie".....> odkázat a zobrazit je tam a tady jim přidat kotvy přes id, něco jako: <div id="preloaded-images"> <img id="one" src="http://perishablepress.com/image-01.png" width="1" height="1" alt="Image 01" /> <img id="two" src="http://perishablepress.com/image-02.png" width="1" height="1" alt="Image 02" /> <img id="three" src="http://perishablepress.com/image-03.png" width="1" height="1" alt="Image 03" /> </div> a zkusil jsem něco takovéhleho pro fotogalerii <ul><li>...</li></ul>, ale bohužel bez efektu CSS:
li img{
position: absolute;
top: 50px;
left:0;
z-index: -1;
}
li img:target{
z-index: 1;
}
li img:not(:target){
opacity: 0;
}PS:K tomu příkladu s overflow se omlouvám, já narazil na úplně stejný příklad s iframem ( moje chybka, že jsem se nepodíval na zdroják ). A nevím proč, ale v posledním řádku kódu CSS se nezobrazuje "}", na řádku 16. , nejde o opomenutí :)) Zdeněk |
||
| Chamurappi Profil |
Reaguji na Zdendukinga:
„všude jen s JavaScriptem nebo jQuery“ Proč nebo? Javascriptový framework je také jen JavaScript. Pokud vím, tak CSS nezná žádnou pseudotřídu vázanou na to, jestli je obsah elementu načtený, proto neexistuje žádný způsob, jak bys na načtení obrázku mohl ve stylech zareagovat. Jediné, co v prohlížečích spolehlivě funguje, je javascriptová událost onload na <img>, zapsaná přímo v atributu (nebo skriptem nastavená před tím, než se nastaví src). Skript nemusí být nijak složitý, mohl by třeba změnit něčemu třídu a zbytek už by byl zase v režii CSS.
Šlo by možná vymyslet nějaký krkolomný trik, jak zareagovat na načtení hlavičky obrázku (na fakt, že prohlížeč zjistil rozměry fotky). Kdybys na straně serveru dokázal zařídit, že nepůjde stahovat víc fotek současně, mohl bys možná počítat s tím, že prohlížeč bude tahat obrázky postupně v pořadí, v jakém jsou zapsané v kódu. Při načtení hlavičky druhého obrázku bys měl (možná) jistotu, že je ten první stoprocentně načtený, a změna proporcí druhého obrázku by mohla nějak způsobit zviditelnění prvního. Ale to je opravdu extrémní řešení. „přiložím odkaz na preload s kterým se snažím pracovat“ Vrací mi 403 Forbidden. |
||
| margin Profil * |
#10 · Zasláno: 3. 10. 2012, 19:25:36
|
||
| Zdendaking Profil |
#11 · Zasláno: 3. 10. 2012, 20:52:43
ad Chamurappi
tož až takový guru nejsem, abych se motal do problematiky s hlavičkami, protože zde by asi nedošlo k úspoře času a ani ke snížení počtu požadavků na server, spíš asi přibylo. Ale v uváděném odkazu od Jeffa Stara logicky vyplývá, že se ty img preloadnou přes ty <img src="..">, protože když to napíšu úplně stejně, jen vynechám v podstatě to zneviditelnění přes CSS, tak se v uvedeném místě divu do stránky taky načtou jen jsou tam všechny nabouchaný v původní velikosti a kráse. Pokud se to udělá formou uvedenou v příkladu marginem, tak se musí čekat na zbytek stránky za divem s <img src="" a stránka se škube při větší velikosti obrázků. Nejde o problém, že by to nešlo udělat s JavaScriptem nebo jQuery, ale zadaní je jen na holý HTML + CSS + PHP. Dam ještě jednou odkaz na stránky v textové podobě ke zkopírování do prohlížeče: http://perishablepress.com/pure-css-better-image-preloading-without-javascript/ nebo: http://perishablepress.com/css-throwdown-preload-images-without-javascript/ Zdeněk |
||
| joe Profil |
#12 · Zasláno: 3. 10. 2012, 23:07:25
Zdendaking:
„z PHP budu generovat lištu thumbs náhledů s odkazem na preloadnuté obrázky“ Proč bys to dělal? Ne každý si bude prohlížet všechny obrázky, tak je zbytečné je všechny předem načítat. Zobraz jen náhledy. Pokud chceš aby se obrázky zaostřovaly během načítání, ulož je jako progresivní. „ale zadaní je jen na holý HTML + CSS + PHP“ Pěkně hloupé zadání, buď tě někdo testuje a nebo to máš do školy od nemyslícího učitele. Ani jedno "čisté" řešení od Jeff Starra není správné, dává obrázky tam, kde nemají co dělat. A pokud tam nedává obrázky, používá prázdné elementy. viz panther: „Obrazek je obrazek a pozadi je pozadi.“ Jediné správné řešení je s JavaScriptem, protože v něm poznáš díky události onload, kdy byl obrázek načtený. Kromě toho jsem měl za to, že některé prohlížeče nenačítají obrázek, který není vidět ve viewportu, ať už je definován jako skutečný obrázek nebo pozadí přes CSS, takže tomu "řešení" od Jeffa moc nevěřím. |
||
| Zdendaking Profil |
#13 · Zasláno: 4. 10. 2012, 00:06:35
ad joe
v PHP na serveru je to ošetřené přes stránkování, takže se vždy vygeneruje pouze zadaný počet náhledů (libovolně 4..10..100, rozumně do 10/na stránku) s možností dalšího rolování po stránkách ( celkový počet/počet náhledů na stránce) a tady má na pozadí dojít k tomu preloadu na klienta sosnutím do toho zkrytého divu na konci stránky, aby byly již na klientovi v okamžiku, kdy se klikne na příslušnou miniaturu v náhledu. Máš pravdu, že se jedná spíše o teoretické zadání, ale ( bez polemiky ) něco jako pro vidláky co mají schizofrenně vypnutý javascript a chtějí si prohlížet dynamickou fotogalerii ( bez flashe :))). Zdeněk |
||
| joe Profil |
#14 · Zasláno: 4. 10. 2012, 00:22:27
Zdendaking:
„něco jako pro vidláky co mají schizofrenně vypnutý javascript a chtějí si prohlížet dynamickou fotogalerii“ Můžou, ale galerie bude bez předem načtených obrázků :-) Nevidím problém. Ve většině případů je dobré načítat data až v případě, že je skutečně chci, tohle je právě ten případ. Pokud budu mít vypnutý JavaScript, pravděpodobně budu chtít taky ušetřit na přenesených datech a ty mě takto budeš nutit stahovat obrázky, na které se třeba ani nerozhodnu kliknout a budeš mi čerpat měsíční limit pro stahování dat (a u některých mobilnách operátorů je velmi směšný). Pokud se rozhodnu obrázek si načíst, prostě se mi načte, chvíli si počkám. Lepší než stahovat několik obrázků a nakonec si je ani neprohlídnout... |
||
| Chamurappi Profil |
#15 · Zasláno: 4. 10. 2012, 11:37:25
Reaguji na Zdendakinga:
Také si myslím, že načítat velké obrázky jen pro případ, že by návštěvník chtěl rozkliknout náhled, nebývá dobrý nápad. „že by to nešlo udělat s JavaScriptem nebo jQuery“ Zase to divné nebo :-) Reaguji na joa: „Kromě toho jsem měl za to, že některé prohlížeče nenačítají obrázek, který není vidět ve viewportu, ať už je definován jako skutečný obrázek nebo pozadí přes CSS, takže tomu "řešení" od Jeffa moc nevěřím.“ Také jsem si to myslel (četl jsem kdysi cosi o Firefoxu, který takto údajně postupoval) a šířil tuto informaci, ale nedávno jsem prováděl řadu pokusů (zejména na telefonech) a dospěl jsem k závěru, že <img> se načítá vždy. Na rozdíl od backgroundu, nad kterým prohlížeč přemýšlet může — nezkoumal jsem, do jaké míry vyhodnocuje jeho nutnost, jen jsem vyzkoušel, že display: none spolehlivě způsobí nenačtení.
Na druhou stranu mám také vyzkoušeno, že se <img> nezařazený do DOMu několika procentům lidí nenačte (ve srovnání se zařazeným <img>), ale vůbec nevím, o jaké lidi a jaké prohlížeče jde. Je to taková temná hmota českého internetu, neměří je totiž žádná statistika. U těchto lidí se možná neviditelné <img> také nenačítají.
|
||
| panther Profil |
Chamurappi:
„Na rozdíl od backgroundu, nad kterým prohlížeč přemýšlet může“ muzes byt konkretnejsi? Mam za to, ze kdyz mas kdesi v CSS definovany background, je stazeny vzdy a vsude. Jak jsi tu poznamku myslel? Ted si nejsem uplne jisty, ale tusim, ze pri zapisu: body {background: url('obrazek.jpg');}
@media screen and (max-width:649px) and (min-width:560px){
body {background: none;}
}se stahne obrazek.jpg i pro viewporty uvnitr te podminky, prestoze by bylo logicke, aby k takovemu stazeni nedoslo.
|
||
| Zdendaking Profil |
#17 · Zasláno: 4. 10. 2012, 13:29:02
Děkuji všem za příspěvky, když jsem se na to ještě jednou podíval, tak i řešení od margina je v podstatě totožné s onou myšlenkou nasosnout několik snímků do neviditelného divu a pak je přes náhledy s odkazy zobrazit. Je jedno jestli přes náhledy nebo odkazy jako v daném příkladě, prostě těch několik <img> už je na klientovi, než se stačí divák na stránce zorientovat a z náhledů si vybrat ten pravý ořechový. U mne se vlastně stránkuje po 5. náhledech a vždy je i těch pět fotek staženo jako u příkladu od margina. Pokud se to šoupne ke konci stránky, tak je v podstatě výsledek stejný a je pravdou, že pokud bude potřeba zobrazit ve třetím kroku celoobrazovkovou variantu fotky, tak na to si může každý počkat.
Zdeněk |
||
|
Časová prodleva: 12 let
|
|||
0