Jump to content
GSForum - Segélyvonal

Oldal betöltése


vmiki

Recommended Posts

vmiki

Hogyan lehetne azt kivitelezni, hogy amíg az oldal betöltése tart, addig egy kis animáció jelenjen meg?

Link to comment
Share on other sites

payskin

Flash. Kell csinálni két flash állományt: az egyik tölti a másikat. A betöltőben kell csinálni egy olyan ActionScriptet, ami egyrészt a betöltést végzi, és figyeli annak állapotát, másrészt az animációt tolja mondjuk annak függyvényében, hogy hol tart a betöltés. Ha a második oldal betöltődött, akkor átadja annak a vezérlést. Egyszerűen hangzik, de azért megcsinálni nem olyan könnyű.

Link to comment
Share on other sites

vmiki

Kösz! Akkor lehet, hogy ezt kihagyom. 8)

Link to comment
Share on other sites

payskin

De megnézem, amikor ezt Flash-ismeret nélkül valaki hipp-hopp felhasználja! :D

Link to comment
Share on other sites

  • 5 months later...
Jumping

Sziasztok!

 

Kéne egy kis segítség! Hogyan tudom azt megcsinálni, hogy ha készítek egy keretekből álló weboldalt az egyik keretben mondjuk vannak a menupontok és bármelyik menupontra kattintok akkor a másik keretbe töltődjön be az oldal? Tehát nem akarom hogy betöltsön egy komplett oldalt, hanem a megadott keretbe töltődjön be. Próbáltam targettel, de nem nagyon működik, csak nem tudom miért.

 

Köszi előre is,

Jumping

Link to comment
Share on other sites

payskin

Pedig targettel kéne. Keress a neten egy frame-es oldalt, és nézd meg a forrását, hogy csinálják.

Link to comment
Share on other sites

Jumping

Hogy én milyen buta vagyok! Erre nem is gondoltam! Köszi!

Link to comment
Share on other sites

  • 3 months later...
Arkangyal1528464506

Az eredeti témára - tudom, nem mai darab :P - vissztatérve, szerintem simán megoldható egy onload-al.

1. beállítod a megjelenítendõ adatot (pl. SPAN-ok között) display:none -ra

2. azon kivül megjelenítesz egy grafikát (csinálsz valamit, stb.)

3. BODY taghoz beraksz egy onload="keszvan()"-t

4. keszvan átállítja az 1.-nél alkalmazott display:none-t sima display-re, a 2.-nél használt tagét meg display?none-ra.

Pl.:

<head>
<script>
function keszvan()
{
// éljen az MSIE, mindenféle getElement+stb. nélkül...
    document.all.tartalom.style.display='';
    document.all.amig.style.display='none';
}
</script>
</head>
<body onload="keszvan()">

<table id=tartalom style=display:none><tr><td>


Bla-bla-bla...


</td></tr></table>
<img id=amig src=betoltesig.gif>
</body>
</html>

Link to comment
Share on other sites

payskin

És ha a JavaScript le van tiltva, az életben nem jelenik meg az oldal tartalma. :) Arról nem is beszélve, hogy a fenti példában az animáció csak azután jelenik meg, miután a táblát (ami ugye nem látszik), már betöltötte és lerenderelte a böngésző. Ha az egy masszív, többszörösen összetett tábla, akkor előfordulhat, hogy a böngésző jó sokáig elszórakozik vele, és már csak akkor rakja ki egészben, ha kész a renderrel. Ez alatt kéne kint lennie valaminek az oldalon, de az animációra még sor sem került. Nem kimondottan váltja be a hozzáfűzött reményeket. Szóval, ha már, akkor érdemes volna a tábla elé helyezni.

Link to comment
Share on other sites

Arkangyal1528464506

JS-active scripting teszt azt' csókolom (flash sem feltétlenül megy).

Hm? Nem visibility-t használtam - tehát nem foglal helyet a tábla, amíg meg nem jelenik -, hanem display-t, tehát az anim mindenképpen látszódni fog az oldalon, ráadásul ott, ahol akarod (akár oldal tetején, mindegy a kódban hova rakom).

Gondolom ilyen oldalt ritkábban alkalmaznak bazi nagy táblánál, de pl. képek is vannak benne, akkor meg a képek betöltésével elég egy értéket ++növelni bizonyos feltételig, a növelést meg mutatja pl. pár pici grafika vagy csak egy százalékos szám kiírás.

 

Ez működő megoldás, többször alkalmaztam már.

Link to comment
Share on other sites

Garono

Nekem pont egy ilyenre lett volna szükségem, de így keresnem már nem kell. Ki is próbáltam, tökéletesen működik. ;) Bár az igaz, hogy a töltő animációt észszerűbb a betöltendő oldalrész elé helyezni.

 

Említettél egy százalékos kiírást is, ez érdekelne... :ötlet:

Link to comment
Share on other sites

payskin
JS-active scripting teszt azt' csókolom (flash sem feltétlenül megy).

Ez nem értem. Mitõl fog látszódni a tartalom? De most már kíváncsi lettem, ki fogom próbálni. :)

 

Link to comment
Share on other sites

Arkangyal1528464506

Még mindig nem értem, hogy mi bajotok az animációval :D? Ha betölt minden, akkor eltűnik, tök mindegy hol van. Mit nem értek, írjátok már jobban le :D! Próbáltam gyorsan összedobni valamit:

 

<head>
<script>
var adjon=0;
function keszvan()
{
// éljen az MSIE
    document.all.tartalom.style.display='';
    document.all.amig.style.display='none';
}


function CreateElement() { 
    if(document.createElement){ 
        var egyvar = document.createElement("DIV"); 
        egyvar.id = "szorp";     
        with(egyvar.style){ 
            width = 100+"%";
            borderColor="green";
            borderStyle="dashed";
            borderWidth="2";
            filter="Blur(Add = 1, Direction = 225, Strength = 8)";
            color = "white"; 
            backgroundColor = "black"; 
            textAlign = "center"; 
            fontWeight = "bold"
            fontFamily ="Arial CE, Helvetica, seriff"
            fontSize= 14 + "px";
            padding= 2 + "px";
        } 
        egyvar.innerHTML = "Az oldal betöltés alatt.. <b>"+adjon+" %</b> kész.";
        document.body.appendChild(egyvar); 
    } 
} 

function csaklovomarigot()
{
szorp.innerHTML = "Az oldal betöltés alatt.. <b>"+adjon+" %</b> kész.";
document.body.appendChild(szorp);
if (adjon==3) document.all.tartalom.style.display='';
}
</script>
</head>
<body onload="CreateElement();adjon++" border=0 leftmargin=0 rightmargin=0 topmargin=0>

<table id=tartalom style=display:none><tr><td>
    Bla-bla-bla...
</td></tr></table>
<img id=amig src=lions.jpg>

<button onclick=csaklovomarigot();adjon++ style="width:100%;background-color:black;color:white">Nosza...</button>

</body>
</html>

Most ez nem konkrétan jó, de majd áthelyezgeted. Szóval ott a Nosza gomb - baromira csak az egyszerűség kedvéért, míg nem gondolkodsz képekkel.. -, mikor rákattintasz, akkor szépen el kezdi növelni az adjon értékét, egy úttal az alatta levő (nem kell ilyen generált stílussal vacakolni, csak írd ki manuál és akkor akár hova rakhatod) szöveg módosul. Ha képezni akarsz, akkor elég, ha átrakod a Nosza onclick-jét a képek onload-jához (pl. <img src=akarmi.gif onload=csaklovomarigot();adjon++> és amint betölt, ugyanazt csinálja, mint a Nosza-ra kattintás.

A fenti példánál a 3% - azaz 3 adjon-nál - jeleníti meg a tartalom táblát.

Visszatérve a tervhez, kell csinálnod egy feltétel vizsgálatot, pl. minden kép betöltött és akkor eltűntetned a betöltős csíkot. Mondjuk van 4 db képed, akkor

if (adjon==4) document.all.szorp.style.display='none';

Itt érdemes lenne filózni azon, hogy 4 db az nem 100 db, szóval vagy manuálisan szórakozol (egy sorral feljebb alap példa), vagy osztással íratod ki a %-ot, alap pl.:

document.all.szorp.innerHTML=Math.round(100/adjon);

Link to comment
Share on other sites

Garono

Köszi Arkangyal! Hasznát fogom venni. ;) Nem akarok képpel tölteni, elég egy "Loading... n%". :) De majd csak holnap építem be... :upsz:

Link to comment
Share on other sites

payskin

Továbbra is az a problémám, hogy ha nincs JavaScript, nem fog látszódni a tartalom.

 

A kifejezés, amivel eddig valószínûleg nem találkoztál, a graceful degradation, ami arról szól, hogy úgy kell megcsinálni az oldalt, hogy minden körülmények között mûködjön. Egy remek cikk a témában kedvenc blogomból. Illetve nagyon szép példa rá a Microsoft weboldala. Az oldalon egyaránt elérhetõ minden tartalom akkor is ha bekapcsolt, akkor is ha kikapcsolt JavaScripttel mész be. Persze egész másképp néz ki, de mindkét esetben nagyon elegáns. Érdemes tanulmányozni a kódot, rendkívül tanulságos.

Link to comment
Share on other sites

Arkangyal1528464506

<NOSCRIPT>I LOVE MY SCRIPTS! You can either <a href=http://disney.com>leave</a> or live with scripting enabled</NOSCIPT> 

:démonikacaj:

Elképzeltem, hogy Microsoft oldalt készítek ilyen nyeszlett user oldali scriptekkel.. :D! Te viszont nem flasht ajánlottál? Az mennyivel jobb - ráadásul ahhoz kell 1 db plusz program is - a scriptezésnél? Szintén kell objektumokat engedélyezni, szóval ahol a part szakad. Tilthatsz scriptet, css-t, minden féle plugint, átirányításokat, frame és hasonló megoldásokat, de alapvetően egyszerűbb, ha csak valami sima karakteres böngészőt - vagy proxomitron, avagy hasonló szűrő - használsz, ami mellőzi a kódokat.. Mi értelme mindenhol tiltani? Én meg minek szúrjak ki az oldal készítőjével, ha nyílván nem tud semilyen szerver-oldali megoldást használni?

Ha jól értem az alap teóriát - nem olvastam végig, wiki-t néztem -, akkor meg annyi az ámen a grace-re (haladjon a gép akárhogy?), hogy kiírogatsz valami alap szöveget, pl. <noscript>scipt fiam, script! Nosza, kapcsold be itt...</noscript> és akkor a user nyomulhat tovább kedvére.

Link to comment
Share on other sites

payskin

Én? Flasht? Hol? :pislog: Arról nem is beszélve, hogy a Flash honnan tudná, hogy mi és mikor töltődik be az oldalon? :)

Link to comment
Share on other sites

Garono

Amihez nekem kell, azt el sem lehet képzelni JS nélkül, így nem számít, ha le van tiltva, mivel akkor egész egyszerûen semmi nem mûködik. :) Így meg töltésjelzõvel sokkal elegánsabb.

Link to comment
Share on other sites

Arkangyal1528464506
Én? Flasht? Hol?
"Flash. Kell csinálni két flash állományt: az egyik tölti a másikat.", 2. hozzászólás (persze nem egy mai hozzászólás, csoda lenne, ha emlékeznél rá ;) ). Flashben megoldható emlékeim szerint - őszintén szólva, a Macromedia flash 4 már rég volt, de én a frame-k betöltését ki tudtam számíttati (pöttyözés szinten, hogy utolsó előtti, stb. rész már betöltött az állományból). Lényeg, hogy jó régen, de megcsináltam. Azt hiszem az is egy szimpla eltakarással működött vagy pozícionálással, de erről már lövésem sincs, túl régen volt (ha kell, megcsinálom megint Valami. mai cuccal, biztos megint megoldható).

Szerk: Á, eszembe jutott, hogy ott 1 db flashről van szó, függetlenül bármi külsős fájltól (tehát az egy fájl tartalmazta a honlapot), talán így konkrétabb.

Link to comment
Share on other sites

payskin

Ja, hogy ott! Valóban. Flash-ben a 'loader' készítése az alapfeladatok között van, az elsõ ActionScript órán megcsinálja az osztály.

Link to comment
Share on other sites

molnid

Szerintem is lényegesen jobb megoldás a JS, mint a Flash.

Bár én ezt a töltögetéses témát pont fordítva használom JS-sel. Tehát kint van egy form és valaki mondjuk file-t tölt fel. Ilyenkor elõkapom a láthatatlan kis div-et és ott egy apró animált kép, ami addig fut, amíg nem történik meg az action, tehát a file mozgatása alatt még nem töltödik újra az oldal, csak miután végzett.

Ebben az esetben teljesen tökéletes a mûködés. :)

Link to comment
Share on other sites

payskin

Flashben csak a Flash oldalak betöltéshez lehet loadert írni, HTML oldalak vagy részek töltõdésének kijelzésére nem kimondottan alkalmas, tehát a két módszer nem összehasonlítható.

Link to comment
Share on other sites

molnid

Ez világos, de egy HTML-es topikban a kérdésre az elsõ válasz, az volt, hogy oldja meg Flahs loaderrel. Mivel én egyben olvastam el az egész topikot, így bennem volt az a válasz is, aminek itt ugye nem sok értelme. :upsz:

Link to comment
Share on other sites

payskin

Ennek az az oka, hogy a legtöbb kérdezőnek fogalma nincs arról, hogy amit a weben lát, az HTML, Flash vagy mi. Amit vmiki kérdezett az klasszikus Flash, sőt, amikor válaszoltam rá, elképzelni nem tudtam volna, hogy ilyet lehetne HTML-ben is csinálni. Amíg Arki elő nem állt a teóriájával. ;)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...