BlackBoard (http://www.black-board.net/index.php)
- Design, Programmierung & Entwicklung (http://www.black-board.net/board.php?boardid=55)
-- Webdesign (http://www.black-board.net/board.php?boardid=19)
--- JavaScript Ladeanzeige als SplashScreen (erledigt) (http://www.black-board.net/thread.php?threadid=19694)


Geschrieben von HeaD am 24.01.2005 um 16:35:

  Ladeanzeige als SplashScreen (erledigt)

Ich wollte so einen Preloader machen, der nicht das ganze Bild versperrt, sondern nur einen Hinweis anzeigt das der Ladevorgang noch im Gange ist. Dazu habe ich überall dieses Script gefunden:

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
<html>
  <head>
    <title>Ladedemo</title>
    <div ID="waitDiv" style="position:absolute;left:300;top:300;visibility:hidden">
    <table cellpadding="6" cellspacing="0" border="1" bgcolor="#000000" bordercolor="#FFFFFF">
    <tr><td align=center>
    <font color="#ffffff" face="Verdana" size="4">Ladevorgang läuft...</font>
    <img src="await.gif" border="1">
    </td>
    </tr></table>
    </div>

    <SCRIPT>
      <!--
      var DHTML = (document.getElementById || document.all || document.layers);
      
      function ap_getObj(name) {
        if (document.getElementById)
          { return document.getElementById(name).style; }
        else if (document.all)
          { return document.all[name].style; }
        else if (document.layers)
          { return document.layers[name]; }
       }

       function ap_showWaitMessage(div,flag) {
        if (!DHTML) return;
        var x = ap_getObj(div); x.visibility = (flag) ? 'visible':'hidden'
        if(! document.getElementById) if(document.layers) x.left=280/2; return true; } ap_showWaitMessage('waitDiv', 3);
       //-->
     </SCRIPT>
  </head>

  <body>

  <img src="http://www.submarinefund.com/zt1150/desktop.2.21.03.jpg">

  </body>
  
  <SCRIPT language=javascript>
    <!--
      ap_showWaitMessage('waitDiv', 0);
    //-->
  </SCRIPT>
</html>


Mein Problem ist dabei, daß es im Internet auf Foren etc. immer funktioniert, aber bei mir ist immer ein Problem.. Der Funktionsaufruf "ap_showWaitMessage('waitDiv', 0);" läßt die Ladeanzeige verschwinden bevor das Bild geladen ist. Wenn ich diese Zeile entferne dann verschwindet die Ladenanzeige natürlich niemals. Eigendlich sollte das auch mit Bildern funktionieren (das tut es jedenfalls auf Foren (gibt nen paar wo das drin ist) und auf diversen anderen Seiten).. Der Code ist übriegens nicht aus einem Quellcode raus"geklaut" sondern aus einem Tutorial...



Geschrieben von HeaD am 24.01.2005 um 23:33:

 

Ich hab es jetzt anders gemacht und so funktioniert es auch (von der gaaaaaaanz alten Jex-Treme.de Seite (gut wenn man immer noch vor Jahren gespeicherte I-net Seiten auf Platte hat großes Grinsen )

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
<html>
<script>
  var schalter=0, za=0, time=0, spnum=0;

  function blink()
  {
    if (schalter==0)
    {
      document.getElementById(["loading"]).style.visibility="hidden";
      document.getElementById(["an"]).style.visibility="hidden";
    }
    if (schalter==1)
    {
      document.getElementById(["loading"]).style.visibility="visible";
      if (za==1)
      {
        document.getElementById(["an"]).style.visibility="visible";
        za=0;
      }
      else
      {
        document.getElementById(["an"]).style.visibility="hidden";
        za=1;
      }
    }
    time = Math.floor(Math.random()*150)

    setTimeout("blink()", time);
  }
</script>

<body onload="blink()">

  <div id="loading" style="position:absolute; top:0; left:469;">
    <img src=a_blink19.gif>
  </div>

  <SCRIPT language="JavaScript">
    top.frames.oben.schalter=1;
  </script>

  <img src="http://www.submarinefund.com/zt1150/desktop.2.21.03.jpg">

  <script>
    top.frames.oben.schalter=0;
  </script>
 
</body>
</html>


Man kann alternativ auch noch

<div id="aus" style="position:absolute; top:0; left:526;">
<img src=images/aus.gif>
</div>

hinzufügen und somit ein Bild nach dem Laden einfügen (z.B. ein blinkendes fürs laden und ein nicht blinkendes wenns fertig ist, oder an und aus, oder rot und grün etc)


Forensoftware: Burning Board 2.3.6, entwickelt von WoltLab GmbH