| Autor | Zpráva | ||
|---|---|---|---|
| moom Profil |
#1 · Zasláno: 12. 1. 2011, 20:01:59 · Upravil/a: moom
Dobrý den, mám prosím dotaz. Udělal jsem si simulaci načítání obrázku,
že jsem si vytvořil CSS styl: .project-gallery img {
margin: 0 0 20px 0;
float:left;
background-image: url(../images/pozadi/loader.gif);
background-repeat: no-repeat;
background-position: center center;
background-color: #2a2a29;
}Problém je, že to působí blbě, když se obrázek načítá postupně od zhora dolů. Dalo by se prosím pomocí JS (nebo třeba i nějak jinak), že by se obrázek zobrazil až po úplném načtení? Našel jsem na webu toto: www.appelsiini.net/projects/lazyload ale na začátku píší, že to už pořádně nefunguje... Prosím, prosím, prosím, nemáte nějaké řešení :) |
||
| tailor19 Profil |
#2 · Zasláno: 12. 1. 2011, 20:42:18
Ahoj, zkusil jsem si to vytvořit http://jsfiddle.net/7RJ7q/. Třeba ti to nějak pomůže.
|
||
| margin Profil * |
#3 · Zasláno: 12. 1. 2011, 20:55:05
moom:
„Dalo by se prosím pomocí JS (nebo třeba i nějak jinak), že by se obrázek zobrazil až po úplném načtení?“ Dalo: Obrázek zobrazit načtený |
||
| moom Profil |
#4 · Zasláno: 12. 1. 2011, 22:04:42
tailor19:
Paráda, Super nádhera. Funguje to krásně. Dlužím pivko i s utopencem :) Mohu se prosím zeptat jestli by šlo ještě nějak udělat abych mohl nadefinovat které obrázky takto načítat. Nastavil bych to jenom na galerii, ale na další doplňky stránky už ne. margin: Taky děkuji, ale nějak se lépe orientuji ve variantě tailora. Umím jenom XHTML a CSS, ale kodér nejsem, tak jsem z toho trošku zmaten. |
||
| moom Profil |
#5 · Zasláno: 12. 1. 2011, 22:08:50
Ještě doplnění. Myslíte, že to je všeobecně dobré použít.
Nebo se vystavuji nějakému riziku, že by někdo obrázky neviděl. Pokud by neměl třeba povolený JavaScript. |
||
| Witiko Profil |
#6 · Zasláno: 12. 1. 2011, 22:14:07 · Upravil/a: Witiko
moom:
Řešení od tailor19 obrázek jak skryje, tak zobrazí až scriptem, takže uživatelům s deaktivovaným javascriptem se stránky zobrazí normálně. Stejně tak řešení od margina - jinak jeho řešení je snad ještě prostší, jen není psané v jQuery. :) |
||
| moom Profil |
#7 · Zasláno: 12. 1. 2011, 22:58:25
Jo, jo, už jsem si vyzkoušel oba. Sice tailorovo řešení mně hlásí, že není validní použití
onload v rámci IMG, ale každopádně díky za pomoc. Třeba se to bude hodit. Ještě vymyslet jak nadefinovat načítání jenom určitých obrázků... Kurňa, myslel jsem že bych po XHTML a CSS udělal výlet do tajů PHP, ale asi budu muset udělat výlet do říše JS :) |
||
| joe Profil |
#8 · Zasláno: 12. 1. 2011, 23:01:04
moom:
„že není validní použití“ Což vůbec ničemu nevadí. |
||
| Chamurappi Profil |
#9 · Zasláno: 12. 1. 2011, 23:18:56
Reaguji na mooma:
„Nebo se vystavuji nějakému riziku, že by někdo obrázky neviděl“ Vystavuješ se velmi reálnému riziku, protože některé prohlížeče skryté obrázky nenačítají. Pokud je skript stihne skrýt dříve, než je vyslán požadavek na server, tak ten požadavek už nemusí být nikdy vyslán a nikdy nedojde k události onload.
„není validní použití onload v rámci IMG“ Reklamuj u konsorcia, že si dosud nevšimlo, že Netscape Navigator 3.0 zavedl událost onload i na obrázku :-)
Jinak to snad máš opravdu validní? |
||
| tailor19 Profil |
#10 · Zasláno: 12. 1. 2011, 23:32:24
Chamurappi: Mohli by si prosím upřesnit, které prohlížeče skryté obrázky nenačítají?
|
||
| moom Profil |
#11 · Zasláno: 13. 1. 2011, 00:03:58
Tak jestli to chápu správně, tak by bylo lepší použít řešení
s jQuery, kde není onload, jak navrhl tailor19. Asi to aplikuji rovnou na všechny obrázky, protože menu a další důležité obrázky layoutu mám v CSS, tak snad se to vztahuje jenom na IMG v rámci stránky. No a to řešení, že bych určitým obrázkům dal nějaký ID nebo class, a aktivoval to jenom u nich je asi moc složité... |
||
| moom Profil |
#12 · Zasláno: 13. 1. 2011, 00:18:54
A netušíte prosím ještě, jestli se dá nějak simulovat pomalé načítání stránky.
Myslím třeba ve Firebugu, nebo Inspectoru v Google Chrome a Safari. Jenom, že bych si testoval jak se zobrazuje stránka na pomalém připojení. Co se načítá první atd... |
||
| tailor19 Profil |
#13 · Zasláno: 13. 1. 2011, 00:27:02
Celou tu galerii můžeš mít obalenou v divu s určitým id třeba gallery. Tak se to bude vztahovat na obrázky pouze v tom divu
$('#gallery img').hide().load(function() {
$(this).show()
});Ještě si počkej na odpověď s problémem načítáním skrytých obrázků, já se s tím nesetkal. |
||
| Anonymní Profil * |
#14 · Zasláno: 13. 1. 2011, 00:54:29
tailor19:
Děkuji, děkuji, děkuji :) Funguje to parádně. Právě jsem to otestoval na této ukázce. Ještě jednou díky za pomoc. Pokud chamurapy nedá eso na stůl, tak to použiji :) |
||
| margin Profil * |
#15 · Zasláno: 13. 1. 2011, 08:33:15
Opera nenačítá obrázky skryté pomocí display: none; já jsem použil visibility, hlavně proto, že takto skrytý obrázek stále zabírá prostor na stránce. V kódu je zdánlivě nesmyslný časovač, je to proto, že pokud byl obrázek v keši, tak jej Opera nezobrazila. Když jsem přidal časovač, skript fungoval správně, i když jsem nastavil nulový čas.
|
||
|
Časová prodleva: 13 let
|
|||
0