thomas: anzeige eines "bitte warten"

Hi

Ich habe das Problem, daß eine Seite meiner homepage einige thumbnails (ca 30 Stk) beinhaltet. Da der Internetanschluß meines Webservers nicht der schnellste ist, zeigt nun bei der Besichtigung der Seite mit Netscape der Browser eine halbe Ewigkeit (zwischen 20 und 60 sec - wohl unzumutbar solange gar nichts auf dem Bildschirm angezeigt zu bekommen) nichts an (Netscape lädt zuerst alle Bildi bevor er die Seite anzeigt). Während dieser Ladezeit würde ich gerne eine kurze  Info anzeigen lassen.
Weiß jemand eine elegente Lösung dafür? (wenn möglich ohne eine zusätzliche Seite, die dann automatisch weiterleitet. Auch jener mögliche Lösungsvorschlag die Anzahl der Bilder auf der Seite zu reduzieren würde für mich keine wirkliche Hilfe darstellen)

mfG
thomas

  1. Da der Internetanschluß meines Webservers nicht der schnellste ist, zeigt nun bei der Besichtigung der Seite mit Netscape der Browser eine halbe Ewigkeit (zwischen 20 und 60 sec - wohl unzumutbar solange gar nichts auf dem Bildschirm angezeigt zu bekommen) nichts an (Netscape lädt zuerst alle Bildi bevor er die Seite anzeigt).

    Hallo,

    Netscape zeigt die bilder erst dann an wenn die von dir verwendete tabelle fertig geladen ist.

    ergo. verwende mehrere tabellen, zb. nach jeder zweiten zeile eine neue tabelle beginnen.

    Dann bekommt man wenigstens immer etwas zu sehen :-)

    Auch würde ich die tumbs überarbeiten, also weniger farben, gif format...

    ciao
    Ludwig

  2. Hallo thomas,

    die erste Überlegung, einen Alert zu nehmen ist wohl Käse.
    Alles steht und wartet und der Besucher muß das dann auch noch quittieren.

    Automatischer könnte es gehen wenn Du per JS ein  Fensterchen mit dem Text
    aufmachst und das Bilderladen auf loaded oder completed kontinuierlich abfragst.
    Wenn alles da ist, dann kannst Du das Fensterchen per JS wieder zumachen.

    Deine Bemerkung:

    der Browser eine halbe Ewigkeit ... nichts auf dem Bildschirm angezeigt zu bekommen

    läßt darauf schließen, daß die Thumbnails in einer einzigen Tabelle stehen.
    Vermutlich willst Du diese beibehalten. Dann könntest Du außerhalb der Tabelle
    ein Bild mit dem 'Bitte warten' hinsetzen, wiederum das Laden der Bilder per JS
    überwachen und dieses Bildchen am Schluß durch was leeres ersetzen.

    Wenn Du nicht alles in einer Tabelle brauchst, dann könntest Du sie auch
    zeilenweise aufbrechen, dann kommt das Zeugs so kleckerweise.
    Hierbei aber die WIDTH- und HEIGHT-Attribute der Bilder nicht vergessen.

    Klaus

  3. Hi Thomas,

    Während dieser Ladezeit würde ich gerne eine kurze  Info anzeigen lassen.

    Hier hast du ein Vorschlag (funktioniert in NC4 und IE4+5): Ein Layer wird über das gesamte Browserfenster gelegt. Wenn der Ladevorgang abgeschlossen ist (onLoad im BODY) wird das Layer ausgeblendet. Ich habe ein Alert eingefügt, um zu zeigen, daß das Layer tatsächlich da ist, da die Seite ohne Inhalt sehr schnell geladen wird.

    Gruß,
    UlfL

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    .anzeige {  text-align: center; padding-top: 100px}
    -->
    </style>
    <script>
    function hideLayer(){
    alert("Layer wird entfernt!");
    if(document.layers){
      document.layers.Layer1.visibility = "hidden";
    }
    if(document.all){
      document.all.Layer1.style.visibility = "hidden";
    }
    }
    </script>
    </head>

    <body bgcolor="#FFFFFF" onLoad="hideLayer()">

    <div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:1; background-color: #CCCCFF; layer-background-color: #CCCCFF; class="anzeige">
      <h3>Bitte warten... </h3>
    </div>
    Text Text Text
    </body>
    </html>

    1. Vorsicht, ein Semikolon ist verschwunden, so soll es sein:

      <html>
      <head>
      <title>Untitled Document</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <style type="text/css">
      <!--
      .anzeige {  text-align: center; padding-top: 100px}
      -->
      </style>
      <script>
      function hideLayer(){
      alert("Layer wird entfernt!");
      if(document.layers){
        document.layers.Layer1.visibility = "hidden";
      }
      if(document.all){
        document.all.Layer1.style.visibility = "hidden";
      }
      }
      </script>
      </head>

      <body bgcolor="#FFFFFF" onLoad="hideLayer()">

      <div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:1; background-color: #CCCCFF; layer-background-color: #CCCCFF;" class="anzeige">
        <h3>Bitte warten... </h3>
      </div>
      Text Text Text
      </body>
      </html>

  4. Hallo Thomas,

    Du kannst die Bilder vorladen und mittels Javascript die complete-Eigenschaft der Image Objekte abfragen und erst nach Laden aller Images auf die nächste Seite verzweigen.

    Beispiel:

    var picname = new Array();
    picname[0] = "abc.gif";
    picname[1] = "def.gif";
    ...
    // Grafiken vorladen
    for (i = 0;i < picname.length;i++) {
        eval('document.pic' + i + '.src = "' + picname[i] + '";');
    }
    // Ladevorgang überprüfen
    var loadedpic = 0;
    while(loadedpic < picname.length) {
        loadedpic = 0;
        for (i=0; i<picname.length;i++ ) {
            if(eval('document.pic' + i + '.complete') == true) {
                loadedpic++;}
        }
      }
    }
    window.location.href="nächsteSeite.htm";

    Gruß
    Kess

  5. Vielen Dank für eure Lösungsvorschläge!

    mfG
    Thomas