Autor | Zpráva | ||
---|---|---|---|
BMN Profil |
Zdravím,
mám vytvořené vkládání obsahu do divu přes jquery. Jedná se o docela velké stránky a div se načítá třeba 5s, tak bych chtěl přidat během načítání nějaký gif značící načítání. Na konec kódu jsem tedy přidal <div id="loading"></div> a js vypadá takto: JS k zobrazení divu loading během načítání obsahu v divu response $('#loading') .hide() // hide it initially .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); }) JS k mění obsahu divu response $(document).ready(function(){ // load index page when the page loads $("#response").load("home.html"); $("#news").click(function(){ // load about page on click $("#response").load("load.php?s=news"); }); $("#ccalendar").click(function(){ // load about page on click $("#response").load("load.php?s=calendar"); }); HTML <div class="container"> <ul> <li><a href="#" id="news" class="nav">Novinky</a></li> <li><a href="#" id="ccalendar" class="nav">Kalendář</a></li> <li><a href="#" id="static" class="nav">Horizontální menu</a></li> </ul> </div> <div id="response"></div> <div id="loading"></div> V CSS jsem dal jako background divu gif s načítáním. Bohužel to nefunguje a během načítání se nic nezobrazí. Prosím ví někdo kde je problém? |
||
_es Profil |
BMN:
Rátaš s tým, že hentaké pseudoodkazy budú vyhľadávače ignorovať? A s tým, že nebudú fungovať s vypnutým JS? Obsah home.html budú mnohé vyhľadávače asi ignorovať tiež - aký je účel tohoto? Prečo tam nedáš rovno to, čo tam má byť a načítavaš to cez JS?
|
||
BMN Profil |
Ano, jedná se o administraci webu, kde stejně bude robots disallow. Navíc na stránce budou tyto odkazy i normálně než načítání do divu přes js.
Spíš se mi jedná, aby mi fungovalo zobrazení loading během načítání toho obsahu. Jinak jak by to tedy šlo jinak přes to js? |
||
preca1 Profil |
#4 · Zasláno: 19. 10. 2013, 21:34:18
Napadá mě víc možnejch problémů:
- div nemá žádnou velikost - špatně zadaná cesta k obrázku (má být relativní vůči css souboru, ne html) - první část kódu voláš dřív, než je onen div na stránce, takže se neprovede a kvůli tomu, jak funguje jQuery, se to nikdy nedovíš |
||
_es Profil |
BMN:
„aby mi fungovalo zobrazení loading během načítání toho obsahu“ Stačí tesne pred odoslaní požiadavku do <div id="response"> vložiť nejaký animovaný gif - ktorý si už popredu načítal.
„Jinak jak by to tedy šlo jinak přes to js?“ Zná sa mi, že sa snažíš vyrobiť funkcionalitu iframe. Prečo ho teda rovno nepoužiť? V home.html , load.php?s=news , load.php?s=calendar máš čo? Ak celú stránku, tak do divu samozrejme nepatria značky ako <!doctype> , <head> a pod.
|
||
BMN Profil |
#6 · Zasláno: 19. 10. 2013, 21:46:08
preca1:
V css by problém být neměl, napsal jsem text přímo do divu a také se nezobrazuje. _es: Do <div id="loading"></div> mám vložit gif? To se také nezobrazí. Chtěl bych to vytvořit takto, aby se to dynamicky načítalo než přes iframe. |
||
_es Profil |
BMN:
„aby se to dynamicky načítalo než přes iframe.“ Obsah iframe sa ti predsa rovnako dynamicky môže zmeniť po kliknutí na odkaz smerovaný doňho. Ako „dynamickejšie“ to máš teraz? „Do <div id="loading"></div> mám vložit gif? To se také nezobrazí.“ Vložiť v JS tesne pred volaním jQuery metódy *.load .
|
||
BMN Profil |
#8 · Zasláno: 19. 10. 2013, 21:56:51
Můžeš mi teda prosím poslat příklad jak by to mělo vypadat vložené před to load?
|
||
_es Profil |
#9 · Zasláno: 19. 10. 2013, 22:03:20
BMN:
A to podivné nezmyselné načítanie home.html cez JS chceš ponechať, alebo si si to rozmyslel? (od toho záleží aké riešenie bude jednoduchšie)
Máš v tých „dynamických“ obsahoch naozaj len to, čo patrí do elementu div, alebo aj „bordel“, čo tam byť nemá - lebo mám podozrenie, že áno. |
||
BMN Profil |
#10 · Zasláno: 19. 10. 2013, 22:08:34
Tady takto jak to je.
Má to nějaký dopad na to že se nezobrazuje gif při načítání? :) |
||
_es Profil |
#11 · Zasláno: 19. 10. 2013, 22:16:01
BMN:
Neodpovedal si na druhú otázku. |
||
BMN Profil |
#12 · Zasláno: 19. 10. 2013, 22:19:17
Není to docela jedno, co je v těch souborech, které se načítají do divu, když mám pouze problém s tím zobrazením gifu během načítání? Je tam samozřejmě kód už jen bez <head> apod.
|
||
martin1312 Profil |
#13 · Zasláno: 19. 10. 2013, 22:29:08
A zobrazí sa ti ten gif aj samostatne? Teda bez volania z jQuery, iba ked ho mas na stranke.
|
||
_es Profil |
BMN:
Daj do HTML kódu: <div id="response"><img src="odkaz na gif obrázok"></div> <div id="response"> dáš pred príkazy v 7. a 12. riadku. <div id="loading"> nepotrebuješ.
|
||
BMN Profil |
Ano, gif je na stránce celou dobu. Místo toho aby se zobrazil pouze v momentu načítání.
_es: Ok, díky. Věděl by někdo jak vyřešit tento problém bez použití jiného řešení? |
||
martin1312 Profil |
keď skúsiš:
$("#response").load("load.php?s=calendar", function(){ //zrušit gif tu $('#loading').hide(); }); |
||
BMN Profil |
#17 · Zasláno: 19. 10. 2013, 22:53:24
martin1312:
Když to přidám do toho loader.js, tak jak by pak měl vypadat ten druhý soubor? loader.js $(document).ready(function(){ // load index page when the page loads $("#response").load("load.php?s=calendar"); $("#news").click(function(){ // load about page on click $("#response").load("load.php?s=calendar"); $('#loading').hide(); }); $("#ccalendar").click(function(){ // load about page on click $("#response").load("load.php?s=news"); $('#loading').hide(); }); $("#static").click(function(){ // load contact form onclick $("#response").load("load.php?s=static"); $('#loading').hide(); }); }); spinner.js $('#loading') .hide() // hide it initially .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); }) ; |
||
_es Profil |
#18 · Zasláno: 19. 10. 2013, 22:59:51
|
||
BMN Profil |
#19 · Zasláno: 19. 10. 2013, 23:04:45
To vím taky, ale bohužel js neumím ani trochu, tak by se mi hodilo, když to někdo napíše konkrétně na příkladu.
|
||
_es Profil |
#20 · Zasláno: 19. 10. 2013, 23:15:36
BMN:
„bohužel js neumím ani trochu“ Ako v ňom chceš programovať, keď ho nevieš? jQuery nie je programovací jazyk: Časté potíže, zajímavosti a poučné debaty » Potíže s frameworky, jQuery apod. |
||
BMN Profil |
#21 · Zasláno: 19. 10. 2013, 23:28:59
_es:
Ok díky, nemá cenu k tomuto dál něco psát. Potřebuji pouze někoho, kdo je ochotný hodit sem konkrétní řešení. |
||
_es Profil |
#22 · Zasláno: 19. 10. 2013, 23:36:48
BMN:
Konkrétne riešenie (návod naň) máš v [#18]. jQuery má aj oficiálnu dokumentáciu. Alebo na to použi nejaké hotové skripty, asi už niečo také s „loading obrázkom“ a sťahovaním dát zo servera do nejakého elementu na stránke existuje. |
||
BMN Profil |
#23 · Zasláno: 20. 10. 2013, 00:40:26
Když dám img do <div id="response"> tak se nezobrazí.
|
||
_es Profil |
#24 · Zasláno: 20. 10. 2013, 15:06:33
BMN:
No tak ho tam dávaš nejako chybne, možno súbor obrázka neexistuje, chybná cesta k súboru a pod. |
||
Kubo2 Profil |
#25 · Zasláno: 20. 10. 2013, 15:31:08
BMN:
Tak hoď odkaz na živú ukážku. |
||
Časová prodleva: 7 let
|
0