Jump to content
GSForum - Segélyvonal

Oldal betöltése

vmiki

By vmiki
in HTML

 Share

Recommended Posts

vmiki

vmiki

Posted
Posted

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

payskin

payskin

Posted
Posted

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ű.

vmiki

vmiki

Posted
  • Author
Posted

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

payskin

payskin

Posted
Posted

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

  • 5 months later...
Jumping

Jumping

Posted
Posted

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

payskin

payskin

Posted
Posted

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

Jumping

Jumping

Posted
Posted

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

  • 3 months later...
Arkangyal1528464506

Arkangyal1528464506

Posted
Posted

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>

payskin

payskin

Posted
Posted

É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.

Arkangyal1528464506

Arkangyal1528464506

Posted
Posted

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.

Garono

Garono

Posted
Posted

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:

payskin

payskin

Posted
Posted
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. :)

 

Arkangyal1528464506

Arkangyal1528464506

Posted
Posted

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);

Garono

Garono

Posted
Posted

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:

payskin

payskin

Posted
Posted

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.

Arkangyal1528464506

Arkangyal1528464506

Posted
Posted 

<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.

payskin

payskin

Posted
Posted

É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? :)

Garono

Garono

Posted
Posted

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.

Arkangyal1528464506

Arkangyal1528464506

Posted
Posted
É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.

payskin

payskin

Posted
Posted

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.

molnid

molnid

Posted
Posted

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. :)

payskin

payskin

Posted
Posted

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ó.

molnid

molnid

Posted
Posted

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:

payskin

payskin

Posted
Posted

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. ;)

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
 Share
Go to topic listing
×
×
  • Create New...