Grafik zeigen während des Ladevorgangs

[Lars Weigand]

Hallo,

Ich habe eine Suchseite implementiert. Nun kann es sein, daß gerade bei langamen Verbindungen, daß es 5-10 Sek. dauert, bis die Ergebnistabelle angezeigt wird. Es passiert dadurch, daß einige ungeduldige Nutzer schon woanders klicken, da sie glauben keine Antwort zu erhalten. Daher möchte ich eine "loading..." Grafik anzeigen, bis die Seite fertig geladen ist und dann die Ergebnistabelle darüber anzeigen.

Kann mir jemand einen Tipp geben, welche Technik ich da einsetzen sollte (Layer?)? Gibt es Beispiele? Es sollte für möglichst viele Browser funktionieren!

Vielen Dank,
Lars

[Zeromancer]

Hallo Lars,

ich finde ja

<img src="http://www.geocities.com/zotzmann/wait.gif" border="0" alt="">

einfach und gut. Es sollte keine Browser-Sorgen geben (vielleicht Text-Browser).

MfG

André

[Gun]

Hallo,

Ich habe eine Suchseite implementiert. Nun kann es sein, daß gerade bei langamen Verbindungen, daß es 5-10 Sek. dauert, bis die Ergebnistabelle angezeigt wird. Es passiert dadurch, daß einige ungeduldige Nutzer schon woanders klicken, da sie glauben keine Antwort zu erhalten. Daher möchte ich eine "loading..." Grafik anzeigen, bis die Seite fertig geladen ist und dann die Ergebnistabelle darüber anzeigen.

Kann mir jemand einen Tipp geben, welche Technik ich da einsetzen sollte (Layer?)? Gibt es Beispiele? Es sollte für möglichst viele Browser funktionieren!

Vielen Dank,
Lars

Hallo,

Kompatibilitätsprobleme der Browser bzgl. document.all und document.layers (sowie den Stil-Atrributen darunter) löst Du mit der JavaScript Funktion "eval".

Beispiel:

var layerRef="", styleSwitch="";
function init(){
  if (navigator.appName == "Netscape") {
    var layerRef="document.layers";
    var styleSwitch="";
  }else{
    var layerRef="document.all";
    var styleSwitch=".style";
  }
}

function showLayer(layerName){
  eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
}

function hideLayer(layerName){
  eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
}

Über CSS definierst Du verschiedene Layer, die Du dann mit solchen Funktionen einfach ein- und ausblenden kannst.

CSS Details siehe SelfHTML ;)

Javascript Details, DHTML siehe SelfHTML oder dhtmlcentral.com

Viel Spaß ;)

Gun

[Struppi]

Kompatibilitätsprobleme der Browser bzgl. document.all und document.layers (sowie den Stil-Atrributen darunter) löst Du mit der JavaScript Funktion "eval".

Beispiel:

var layerRef="", styleSwitch="";
function init(){
  if (navigator.appName == "Netscape") {
    var layerRef="document.layers";
    var styleSwitch="";
  }else{
    var layerRef="document.all";
    var styleSwitch=".style";
  }
}

Arggh!
Du verwendest nur 4'er Browser?

Um danach schön eval (ist evil) einzusetzten?

function showLayer(layerName){
  eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
}

function hideLayer(layerName){
  eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
}

function getById(id, win)
{
    var doc = window.document;
    if(win) doc = win.document;

if(typeof id == 'undefined') return null;

var obj = null;
    if(document.getElementById) obj = doc.getElementById(id);
    else if(typeof document.layers != 'undefined')  obj = doc.layers[id];
    else if(document.all) obj = doc.all[id];

return obj;
}

////////////////////////////////////////////////////////////
// setVis
function setVis(obj, mode)
{
    if(!obj) return null;
    if(typeof obj == "string") obj = getById(obj);
    if(typeof document.layers != 'undefined')
    {
         obj['visibility'] = mode ? 'show' : 'hidden';
         return obj['visibility'];
    }
    obj.style['visibility'] =  mode ? 'visible' : 'hidden';
    return obj.style['visibility']
}

Struppi.

[Gun]

Mag sein, daß ich zum letzten Mal so was gecodet hab, als 4er Browser aktiv waren. Was ist evil an eval?

[Struppi]

Mag sein, daß ich zum letzten Mal so was gecodet hab, als 4er Browser aktiv waren. Was ist evil an eval?

Es
* ist in 99,999% der Fälle wo es eingesetzt wird überflüssig
* ist sau langsam
* erschwert die Fehlerüberprüpfung
* läßt manche Browser nach einer Weile abstürzen

Struppi.