BlackBoard » Design, Programmierung & Entwicklung » Webdesign » JavaScript Ladeanzeige als SplashScreen (erledigt) » Hallo Gast [Anmelden|Registrieren]
Letzter Beitrag | Erster ungelesener Beitrag Druckvorschau | An Freund senden | Thema zu Favoriten hinzufügen
Neues Thema erstellen Antwort erstellen
Zum Ende der Seite springen Ladeanzeige als SplashScreen (erledigt)
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
HeaD HeaD ist männlich
Hoffnungsloser Sozialfall in Behandlung bei Styx


images/avatars/avatar-2266.gif

Dabei seit: 31.08.2001
Beiträge: 4.142
Herkunft: Mama

Ladeanzeige als SplashScreen (erledigt)       Zum Anfang der Seite springen

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

__________________

24.01.2005 16:35 HeaD ist offline E-Mail an HeaD senden Homepage von HeaD Beiträge von HeaD suchen
HeaD HeaD ist männlich
Hoffnungsloser Sozialfall in Behandlung bei Styx


images/avatars/avatar-2266.gif

Dabei seit: 31.08.2001
Beiträge: 4.142
Herkunft: Mama

Themenstarter Thema begonnen von HeaD
      Zum Anfang der Seite springen

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)

__________________

24.01.2005 23:33 HeaD ist offline E-Mail an HeaD senden Homepage von HeaD Beiträge von HeaD suchen
Baumstruktur | Brettstruktur
Gehe zu:
Neues Thema erstellen Antwort erstellen
BlackBoard » Design, Programmierung & Entwicklung » Webdesign » JavaScript Ladeanzeige als SplashScreen (erledigt)

Forensoftware: Burning Board 2.3.6, entwickelt von WoltLab GmbH