NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: Po obnovení stránky jiný obrázek

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Nocik
Tvůrce
Avatar
Nocik:14.4.2018 22:55

Zdravím, chci se zeptat, jestli by šlo pouze díky html a css udělat to, že po novém načtení stránky se vymění pozadí celé stránky, buď náhodně nebo popořadě (budou tam fotky :D )
předem děkuji za radu, či jakékoliv nasměrování :)

Odpovědět
14.4.2018 22:55
Vítězství je stav mysli.
Avatar
Matúš Olejník
Člen
Avatar
Odpovídá na Nocik
Matúš Olejník:14.4.2018 23:12

Nemyslím si ale netvrdím to na 100% :) . Skôr by som ťa nasmeroval na kúsok JavaScriptu :D

Nahoru Odpovědět
14.4.2018 23:12
/* I am not sure why this works but it fixes the problem */
Avatar
Nocik
Tvůrce
Avatar
Odpovídá na Matúš Olejník
Nocik:14.4.2018 23:13

jaj, to jsem čekal :D no co se dá dělat, naučit se to musím :)

Nahoru Odpovědět
14.4.2018 23:13
Vítězství je stav mysli.
Avatar
Jurajs
Člen
Avatar
Odpovídá na Nocik
Jurajs:14.4.2018 23:19

Ano javascript a nebo i za pomocí jquery, tam je na to metoda resize() :) ...pokud se nepletu...

 
Nahoru Odpovědět
14.4.2018 23:19
Avatar
NouF
Člen
Avatar
NouF:15.4.2018 7:19

Ahoj,

tohle bych řešil na straně PHP, jinak budeš posílat velká data klientovi. Nevím až jak moc to bude trápit tebe, ale znám takový web, kam když příjdeš stáhne to 100+ Mb, protože je tam hodně obrázku ve velké kvalitě. Takže někdo s FUP 300mb bude určitě rád :D

 
Nahoru Odpovědět
15.4.2018 7:19
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Nocik
Neaktivní uživatel:15.4.2018 11:38

Něco podobného jsem tu v jednom článku ukazoval.

https://www.itnetwork.cz/…zmena-pozadi

Sice to už má pár let a není to úplně nejlepší řešení, ale můžeš se inspirovat :D

Nahoru Odpovědět
15.4.2018 11:38
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Jurajs
Neaktivní uživatel:15.4.2018 11:39

Na co resize? :-O

Nahoru Odpovědět
15.4.2018 11:39
Neaktivní uživatelský účet
Avatar
Nocik
Tvůrce
Avatar
Odpovídá na NouF
Nocik:15.4.2018 13:43

13 obrazku ma dohromady cca 7Mb a je to pouze jednostrankovej web, kde bude zakladni info a par dalsich fotek, domnivam se, ze vsechny fotky na cele strance zaberou max 20Mb coz si myslim, ze nebude az tak strasne co se tyce nacitani nebo se pletu? Mile rad se dozvim dalsi informace :D

Nahoru Odpovědět
15.4.2018 13:43
Vítězství je stav mysli.
Avatar
Nocik
Tvůrce
Avatar
Nocik:15.4.2018 13:47

Jinak sem to vyresil skrze cisty JS.. Do pole sem nasazel odkazy na fotky, random cislo a podle cisla se vybere index pole(tudiz fotka) a pak se to vypise jako background-image..
Dal bych zdrojak, ale su na mobilu :D

Nahoru Odpovědět
15.4.2018 13:47
Vítězství je stav mysli.
Avatar
NouF
Člen
Avatar
Odpovídá na Nocik
NouF:15.4.2018 13:48

Nebude strašné? Já osobně si myslim že to je hrozně moc. Záleží pro jakou klientelu to je.

Např, ITNetwork má cca 2Mb se zapnutou cache 14 Kb

 
Nahoru Odpovědět
15.4.2018 13:48
Avatar
Nocik
Tvůrce
Avatar
Odpovídá na NouF
Nocik:15.4.2018 13:50

Jaj :D tak nejspis to moc vadit nebude, ale pro priste rikas, ze bude urco lepsi to generovat nahodne serverem z databaze ze?

Nahoru Odpovědět
15.4.2018 13:50
Vítězství je stav mysli.
Avatar
NouF
Člen
Avatar
Odpovídá na Nocik
NouF:15.4.2018 15:27

Ono to můžeš řešit i javascriptem, ale musíš načíst jen ty obrázky které opravdu potřebuješ a nejlépe ve velikosti která bude únosná.

 
Nahoru Odpovědět
15.4.2018 15:27
Avatar
Nocik
Tvůrce
Avatar
Odpovídá na NouF
Nocik:15.4.2018 15:29

Aha a jde to pouze díky nějaké funkci nebo to je nějaké složitější?

Nahoru Odpovědět
15.4.2018 15:29
Vítězství je stav mysli.
Avatar
NouF
Člen
Avatar
Odpovídá na Nocik
NouF:15.4.2018 15:31

ee, vytvoříš si nejaký buffer (třeba pole, jako seznam obrázků) a pak si vybereš ten co chceš. Myslim že si psal že už to máš hotové, takto je to celkem ok. Pak chce mrknout, jestli ty obrázky opravdu potřebuješ takto velké, jestli nejdou optimalizovat.

 
Nahoru Odpovědět
15.4.2018 15:31
Avatar
Nocik
Tvůrce
Avatar
Nocik:15.4.2018 16:37 
function randombg(){
  var random= Math.floor(Math.random() * 13) + 0;
  var bigSize = ["url('img/random/1.jpg')",
                 "url('img/random/2.jpg')",
                 "url('img/random/3.jpg')",
                 "url('img/random/4.jpg')",
                 "url('img/random/5.jpg')",
                 "url('img/random/6.jpg')",
                 "url('img/random/7.jpg')",
                 "url('img/random/8.jpg')",
                 "url('img/random/9.jpg')",
                 "url('img/random/10.jpg')",
                 "url('img/random/11.jpg')",
                 "url('img/random/12.jpg')",
                 "url('img/random/13.jpg"];
  document.getElementById("random").style.backgroundImage=bigSize[random];
}

JS, pak jen zavolám onload funkci randombg a ty obrázky jsem zmenšil na 1920x1080 - jsou to fotky vintage kol a kámoš si na tomhle dost zakládá, aby to šlo vidět, takže se je snažím zachovat s co nejvíce detaily

Nahoru Odpovědět
15.4.2018 16:37
Vítězství je stav mysli.
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:23.4.2018 15:54

'20Mb coz si myslim, ze nebude az tak strasne co se tyce nacitani nebo se pletu'
Bude. Pokud ma stranka se vsim, html, css, text, obrazky a jine vice nez 100 kb je v celku nepouzitelna a obvykle casto i neprehledna. Pojede jen fakt na dobre lince. Ale nemuzes uz pri tom delat nic dalsiho na webu.

Ty obrazky na pozadi by se dali prevest na ten novy obrazkovy format od googlu. Meli by to podporovat vsechny prohlizece. V pripade obrich obrazku plakatove velikosti, kde nejsou titerne detaily bych tipoval tak 70% mensi velikost.
https://developers.google.com/speed/webp/
http://webpjs.appspot.com/ - webp js decoder
https://css-tricks.com/…webp-images/

 
Nahoru Odpovědět
23.4.2018 15:54
Avatar
Nocik
Tvůrce
Avatar
Odpovídá na Peter Mlich
Nocik:23.4.2018 18:25

A jak teda řešíš obrázky, které mají 500kb+ kromě toho co jsi poslal?

Nahoru Odpovědět
23.4.2018 18:25
Vítězství je stav mysli.
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3.5.2018 14:30

Zkus poslat link na jeden. Zkusim najit nejaky konvertor, co z toho vyplodi. Zatim jsem jenom videl ukazky googlu. Nezkousel jsem realne obrazky. Webp slibuje usporu 40% aa je na nej js dekoder. Heif snad kolem 15%.

https://developers.google.com/…ebp/gallery1
https://css-tricks.com/…webp-images/

jpeg / av1 (asi heif) pri stejne velikosti souboru. Pouziva tam ale png, tak stazeni souboru nepomuze.
https://people.xiph.org/…v1stilldemo/

Neresim, nepouzivam 500kb obrazky.

 
Nahoru Odpovědět
3.5.2018 14:30
Avatar
Nocik
Tvůrce
Avatar
Odpovídá na Peter Mlich
Nocik:3.5.2018 21:46

Už na to asi kašli.. vše vyřešeno a projekt je takřka hotový :) každopádně všem děkuji za help ;)

Nahoru Odpovědět
3.5.2018 21:46
Vítězství je stav mysli.
Avatar
gorri
Člen
Avatar
Odpovídá na Nocik
gorri:15.9.2018 13:33

Proc hned musi kazdy pouzivat JS. Vzdyt to jde udelat uplne snadno v PHP a nemusim tim zbytecne zasirat stranku JSkem.

SELECT * FROM mistokdemasinformacisobrazky WHERE (pokud budes chtit pouzit neco specifickeho tak to rekni tady) ORDER BY RAND() LIMIT 1
Tot vse. Naprosto jednoduche.
Nahoru Odpovědět
15.9.2018 13:33
Když vím, tak poradím. Nikdo neví všechno :-)
Avatar
gorri
Člen
Avatar
Odpovídá na Nocik
gorri:15.9.2018 13:43

Samozrejme to musis pripsat k <body idealne formou style a napsat background. Tahat pak jen obrazek.

Nahoru Odpovědět
15.9.2018 13:43
Když vím, tak poradím. Nikdo neví všechno :-)
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 21 zpráv z 21.