Újabb feladvány, avagy a loading indicator pontos receptje

**BagiZoli** · 2007-11-12, 10:18

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.

Hasonló témák:

**AlBrown** · 2007-11-12, 12:33

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

**BagiZoli** · 2007-11-12, 12:40

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.

**kow** · 2007-11-12, 12:45

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.

**BagiZoli** · 2007-11-12, 13:50

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.

**kow** · 2007-11-12, 14:03

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.

**BagiZoli** · 2007-11-12, 14:09

Akkor marad a js. Ez egy egyszerű reláció ilyen változókkal.

**kow** · 2007-11-12, 14:31

Akkor rágd át magad a videókon majd este. Mit dolgozol amúgy?

**BagiZoli** · 2007-11-12, 15:05

Minőségügyi menedzser vagyok hivatalosan egy autóiparnak dolgozó cégnél. A kozmetikára hasonlít leginkább a dolog.

**BagiZoli** · 2007-11-12, 16:09

<!--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ó?

Téma: Újabb feladvány, avagy a loading indicator pontos receptje

Téma eszközök

Display

Újabb feladvány, avagy a loading indicator pontos receptje

re: Újabb feladvány, avagy a loading indicator pontos receptje

re: Újabb feladvány, avagy a loading indicator pontos receptje

re: Újabb feladvány, avagy a loading indicator pontos receptje

re: Újabb feladvány, avagy a loading indicator pontos receptje

re: Újabb feladvány, avagy a loading indicator pontos receptje

re: Újabb feladvány, avagy a loading indicator pontos receptje

re: Újabb feladvány, avagy a loading indicator pontos receptje

re: Újabb feladvány, avagy a loading indicator pontos receptje

re: Újabb feladvány, avagy a loading indicator pontos receptje

A téma címkéi:

Könyvjelzők

Könyvjelzők

Hozzászólás szabályai