Újabb feladvány, avagy a loading indicator pontos receptje
Sziasztok!
Újabb kihívás elé szeretném állítani az Urakat. Szeretnék, egy olyat szkriptet szerezni, ami navigáció közben a php oldaak töltése közben megjelenít egy div-et, majd a töltődés befejezésekor eltűnik.
Na nem tátott szájjal várom a galambot, és sikerült egy majdnem jó meoldást felhajtanom egy fórumról.
Kód:
function showLoading(state) {
if (state == true) {
document.getElementById('loader').style.visibility = visible;
}
else {
document.getElementById('loader').style.visiblity = hidden;
}
}
window.onload = function() {
showLoading(true);
/* Do some other stuff in here... the long part... */
showLoading(false);
}
[a tag a fenti kód mellé ezt a magyarázó szöveget adta:
On every page, call a <div> element to show the loading thing.... then when the page is finally rendered, go ahead and send another call to that same function that shows the function, and hide it.]
Ennek fényében a body legelejére betettem ezt a divet
Kód:
<div id="loader">Please wait, while loading<br/><img src="loager.gif"/></div>
Sajnos a töltődéskori elrejtésért felelős funkció létrehozás messze meghaladta a képességeimet, így 2 órányi w3schools olvasgatás után után feladtam.
Arra szeretném megkérni a segítőkész vállalkozókat, hogy nagyon szájbarágósan írják le, ogy mit hova tegyek, mert nagyon jól lenne sikerülne beheggesztenem az oldalba.
Az időtöket előre is nagyon köszönöm.
re: Újabb feladvány, avagy a loading indicator pontos receptje
HTML kód:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
window.onload = function() {
document.getElementById('loader').style.display = 'none';
}
</script>
</head>
<body>
<div id="loader">Please wait, while loading<br/><img src="loager.gif"/></div>
</body>
</html>
ez? kicsit egyszerűbb fajta :)
re: Újabb feladvány, avagy a loading indicator pontos receptje
AlBrown, gyorsan megteszteltem és eléggé igéretesnek tűnt. Miután hazaérek rögtön elvégzem az inplantációt.
Köszönöm a segítségedet!
Egyre jobban tetszik ez a javascript cucc-buggie, szóval muszály lesz elmélyülnöm benne.:)
re: Újabb feladvány, avagy a loading indicator pontos receptje
A JS egy komplett, hatékony programnyelv, tehát így érdemes belevágni.
Ez a legjobb tananyagok forrása, könyveket felejtsd el.
http://www.juixe.com/techknow/index....ing-javascript
Javaslom a Duglas Crockford előadásaival kezdd.
Pont ilyen loadmaszkot csináltam az új skywebhez, amit remélem ma befejezek.
re: Újabb feladvány, avagy a loading indicator pontos receptje
Köszi srácok. Megpróbálom a w3schools vonalt követni kezdetnek, csak azt nem tudom mit kellene először körbejárnom a php-t, vagy a js-t.
re: Újabb feladvány, avagy a loading indicator pontos receptje
Egyiket sem és mindkettőt. :)
Először a programozás alapjaival ismerkedj meg, kulcsszavak:
software engineering
software design
Majd amelyikhez jobban húz a szíved. "Statikus" tartalmakat akarsz generálni? PHP.
Szeretnéd, hogy midnenféle tuti effektek legyenek? Felhasználói élményfokozás a köbön? Dinamikus formok? Mozgó abalkok a böngészőben?
JavaScript.
re: Újabb feladvány, avagy a loading indicator pontos receptje
Akkor marad a js. Ez egy egyszerű reláció ilyen változókkal.:D
re: Újabb feladvány, avagy a loading indicator pontos receptje
Akkor rágd át magad a videókon majd este. Mit dolgozol amúgy?
re: Újabb feladvány, avagy a loading indicator pontos receptje
Minőségügyi menedzser vagyok hivatalosan egy autóiparnak dolgozó cégnél. A kozmetikára hasonlít leginkább a dolog.
re: Újabb feladvány, avagy a loading indicator pontos receptje
<!--Csak egyetlen probléma van a cuccal, hogy a töltés végeztével, hogya loader div-et követő tartalom nem jelenik meg. Eltávolítottam minden onload funkciót a body nyitó tagból, de semmi. :(
Lehetne az egészet az onUnload-tól kezdeni?
Bocs, hogy fárasztó vagyok-->
Ezt kommentbe teszem, mert csak összejött. Headbe tettem két funkcót
Kód:
<script language="javascript" type="text/javascript">
function hideLoader() {
document.getElementById("loader").style.visibility = "hidden";
}
function startLoader() {
document.getElementById("loader").style.visibility = "visible";
}
</script>
Majd a bodyba Kód:
<body onload="hideLoader ();fadeInPage(); showIFrame();" onunload="startLoader();">
és a tartalom első sorával kezdem is a loader divet.
Annyit szeretnék csak meg tudni, hogy az unload-dal szerintetek elindul a 2.-ik funkció?
