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
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
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
Můžeš mi teda prosím poslat příklad jak by to mělo vypadat vložené před to load?
_es
Profil
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
Tady takto jak to je.
Má to nějaký dopad na to že se nezobrazuje gif při načítání? :)
_es
Profil
BMN:
Neodpovedal si na druhú otázku.
BMN
Profil
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
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>
Tým zároveň zabezpečíš načítanie obrázka. Ako vložiť jQuery metódami do nejakého elementu obrázok, si zisti sám - nepoužívam jQuery a nechcem tu dávať „nejQuery“ kód na to. To vloženie obrázka do divu <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
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
BMN:
Zbytočne to komplikuješ, zjavne nechápeš, čo tvoje kódy robia, prečo nepoužiješ (jednoduché) riešenie v [#14]? Ak z nejakého dôvodu trváš na nadbytočnom elemente <div id="loading">, tak použi riešenie z [#14] na <div id="loading">, no musíš po získaní dát ten obrázok odstrániť/skryť.
BMN
Profil
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
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
_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
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
Když dám img do <div id="response"> tak se nezobrazí.
_es
Profil
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
BMN:
Tak hoď odkaz na živú ukážku.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: