| 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: 5 let
|
|||