DevTrain Startseite Visual Studio 1 Magazin  
  
  
SUCHEN:  
ARTIKEL ONLINE: 525   

Kategorien
.NET
Datenbanken
Web
XML

Allgemein
Camp
Foren
Events
Persönliche Einstellungen
Registrieren
Prämien Shop
Kontakt
Impressum
Über DevTrain

Autoren


   Autor: Andreas Rauch Artikel Drucken
        
Ladezeiten versüssen - Ladestatus mit JS

Ich denke hat schon mal auf seiner Seite wichtige Informationen an Hand von Bildern und Grafiken hinterlegt. Das geht auf Kosten der Ladezeit. Der normale User bricht den Ladevorgang der Seite nach spätestens 5 sek. ab... und kommt nie wieder!

Was kann man dagegen tun? Nun, natürlich die Bilder komprimieren, Infos weglassen ...oder den Besucher beschäftigen.

Aber wie macht man das? Es reicht doch z.B schon zu wissen, wielange es noch dauern wird, bis die Seite komplett geladen ist. Für den Besucher wird die Ladezeit der Seite subjektiv verkürzt.

Wie gehts?

Wir machen zuerst eine Seite, in der alle Bilder vorab geladen werden, die auf der folgende Seite präsentiert werden. Erst wenn diese komplett geladen sind, kommt die Folgeseite.

Zuerts geben wir in einer Variablen die Folgeseite an:

infoseite = "info.html"

Dann teilen wir einer globalen Varaiblen mit, daß wir den Ladevorgang natürlich bei "0" beginnen wollen.

Bei jedem Bild, daß geladen wird, soll auch dieser Zähler demetnsprechend erhöht werden. In unserem Beispiel begnügen wir uns mit der Formel: 100/(Anzahl der Bilder)
als Wert für die Erhöhung bzw. für den Fortschritt des Ladens. Wenn der Wert 100 erreicht ist, wird auch die Folgeseite geladen.

function Bildladen (balken) {
 
    geladen += 20;
    laden (balken, geladen);
   
    if (geladen >= 100)
      window.location = infoseite;
  }


Nun kümmern wir uns um den Fortschrittsbalken:
Zuerst stellen wir sicher, daß die Variable  gültige Werte besitzt und erhöhen die Breite des Balkens.

function ladezeit (balkenanzeige, picfs) {
 
    if (picfs < 0)
      picfs = 0;
     
    if (picfs > 100)
      picfs = 100;
   
    if (document.images)
      balkenanzeige.width = picfs;
  }

  Mit dem event-handler onload teilen wir der Funktion Bildladen mit, daß die Variable geladen soweit erhöht wird bis der Wert 100 erreicht ist.

function Bildladen (balken) {
 
    geladen += 20;
    ladezeit (balken, geladen);
   
    if (geladen >= 100)
      window.location = infoseite;
  }

Und hier der gesamte Code:

<html>
<head>
  <script>
  <!--
  infoseite = "info.html";
 
  function ladezeit (balkenanzeige, picfs) {
 
    if (picfs < 0)
      picfs = 0;
     
    if (picfs > 100)
      picfs = 100;
   
    if (document.images)
      balkenanzeige.width = picfs;
  }
 
  geladen = 0;
 
  function Bildladen (balken) {
 
    geladen += 20;
    ladezeit (balken, geladen);
   
    if (geladen >= 100)
      window.location = infoseite;
  }
 
  // -->
  </script>
</head>

<body>
 
  gleich ist es soweit...
 
  <table width=102 border=1 cellspacing=0 cellpadding=0>
   <tr>
    <td bgcolor="red">
      <img src="ladebalken.gif" name="ladebalken" height=12 width=0>
    </td>
   </tr>
  </table>
  <img src="pic1.jpg" height=100 width=100 onLoad="Bildladen (ladebalken);">
  <img src="pic2.jpg" height=100 width=100 onLoad="Bildladen (ladebalken);">
  <img src="pic3.jpg" height=100 width=100 onLoad="Bildladen (ladebalken);">
  <img src="pic4.jpg" height=100 width=100 onLoad="Bildladen (ladebalken);">
  <img src="pic5.jpg" height=100 width=100 onLoad="Bildladen (ladebalken);">
</body>
</html>

 

TIPP: Verstecken Sie die Bilder , damit die Besucher von der Folgeseite richtig überrascht werden. Und geben sie dem Besucher ein bißchen was zu lesen...

 

Viel Spaß


DevTrain Camp - Schneller zum .NET 3.5 Developer
 
Verwandte Artikel      Verlinkte Dokumente
    Keine verknüpften Dokumente
    Keine Links vorhanden

  Erfasst am: 03.05.2001
  Gültig bis: 02.06.2001
2 Ratings
Bewertung: 90,0%
schlecht    sehr gut  

 
© Copyright 2007 ppedv AG