"Loading, please wait..." message ohne layer/divs möglich?

[Ingo]

Hallo,

kann man bei Klick auf einen Link, der eine Seite im gleichen Frame öffnet, eine "Loading, please wait..." message anzeigen, ohne dabei layer zu verwenden? Habe versucht, per document.writeln den Text zu schreiben (was auch funzt) und dann die entsprechende Seite zu laden. Allerdings ersetzt die anzuzeigende Seite nicht wie beabsichtigt die per document.writeln erzeugte Seite. Kann mir jemand eine Lösung für dieses Problem nennen (oder einen Link)??

Danke,
Ingo.

[Fabian Transchel]

Hi

kann man bei Klick auf einen Link, der eine Seite im gleichen Frame öffnet, eine "Loading, please wait..." message anzeigen, ohne dabei layer zu verwenden? Habe versucht, per document.writeln den Text zu schreiben (was auch funzt) und dann die entsprechende Seite zu laden. Allerdings ersetzt die anzuzeigende Seite nicht wie beabsichtigt die per document.writeln erzeugte Seite. Kann mir jemand eine Lösung für dieses Problem nennen (oder einen Link)??

Nein. Wenn ich auf eine solche Seite treffe, dann gehe ich mit großer Wahrscheinlichkeit gleich wieder weg, denn dafür hab ich DSL nicht bezahlt... Wenn ich dagegegn sehe, dass _etwas passiert_, dann ist es mir egal, wenn das etwas länger dauert. IMHO ist es genau das falsche, einn Ladebalken oder wasauchimmer einzubauen. Halte die Seite klein und den Server schnell und du brauchst das Zeug nicht.

Fabian

[Ingo]

Halte die Seite klein und den Server schnell und du brauchst das Zeug nicht.

Fabian
... grundsätzlich schon klar. Aber wir bauen eine Online-Applikation, in der die Seiten dynamisch generiert werden und man nicht wirklich kontrollieren kann, wie groß die Seiten werden. Also die Anzeige brauchen wir auf jeden Fall, auch wenn Du das nicht für sinnvoll hälst... ;-)

[Fabian Transchel]

Hi

Halte die Seite klein und den Server schnell und du brauchst das Zeug nicht.

Fabian

... grundsätzlich schon klar. Aber wir bauen eine Online-Applikation, in der die Seiten dynamisch generiert werden und man nicht wirklich kontrollieren kann, wie groß die Seiten werden. Also die Anzeige brauchen wir auf jeden Fall, auch wenn Du das nicht für sinnvoll hälst... ;-)

Und? Ich bastle auch "dynamische Online-Applikationen" und habe noch nie einen Ladebalken benötigt. Wenn euer Server zu langsam ist, dann liegt es nicht am Ladebalken... >;)
Wenn sie aber größer als... sagen wir mal 40KB werden, dann habt ihr entweder ein ganzes Handbuch online, oder einen dicken konzeptionellen Fehler...

Fabian

[Reiner]

Hi,

Wenn sie aber größer als... sagen wir mal 40KB werden, dann habt ihr entweder ein ganzes Handbuch online, oder einen dicken konzeptionellen Fehler...

ich weiß nicht, was Du machst, aber es gibt wirklich, ob Du es glaubst oder nicht, Dinge, die etwas Zeit benötigen, weil z.B. in Echtzeit etwas berechnet werden soll. Damit der Browser nicht abschmiert (TimeOut) bzw. der User nicht gleich abhaut, weil er glaubt, daß nichts passiert, muß man etwas "tricksen"!

Die Ursprungsfrage ist IMHO gar nicht "so" doof!

Ingo, kannst Du CGI ausführen? Dann könntest Du Dir irgendwo einen Status reinschreiben (DB oder File) und diesen prüfen. In der Zwischenzeit bietet sich alle paar Sekunden ein Browserrefresh an, falls z.B. ein Browsertimeout das Problem sein sollte.
Beischreib vielleicht mal, was Du genau vorhast?!

Gruß
Reiner

[Fabian Transchel]

Hi Reiner,

Wenn sie aber größer als... sagen wir mal 40KB werden, dann habt ihr entweder ein ganzes Handbuch online, oder einen dicken konzeptionellen Fehler...
ich weiß nicht, was Du machst, aber es gibt wirklich, ob Du es glaubst oder nicht, Dinge, die etwas Zeit benötigen, weil z.B. in Echtzeit etwas berechnet werden soll. Damit der Browser nicht abschmiert (TimeOut) bzw. der User nicht gleich abhaut, weil er glaubt, daß nichts passiert, muß man etwas "tricksen"!

Wenn das so ist, dann mach doch einfach ein

<?php
header("Location: seite.php");
echo("Einen Moment bitte, Ihre Daten werden gesammelt...");
exit;
?>

Grüße, Fabian

[Robert Bamler]

Hallo Ingo,

zum Sinn/Unsinn von Ladeanzeigen möchte ich mich jetzt mal enthalten.

kann man bei Klick auf einen Link, der eine Seite im gleichen Frame öffnet, eine "Loading, please wait..." message anzeigen, ohne dabei layer zu verwenden?

Wie kommst du eigentlich auf die Idee, dass du Layer brauchen könntest?

<html>
<head>
<meta http-equiv="refresh" content="5; URL=daSollstDuHin.htm" />
<script type="text/javascript">
<!--
location.replace("daSollstDuHin.htm");
//-->
</script>
</head>
<body>
Bitte warten...
</body>
</html>

Gut, die Meldung könnte man vielleicht noch etwas höflicher formulieren...

Das Skript ist eigentlich nicht unbedingt nötig, erleichtert aber in den meisten Browsern das Zurückbrowsen mit dem Back-Button des Browsers. Clients, die kein JavaScript unterstützen können evtl. wenigstens noch den meta-Tag auswerten.

Viel Erfolg,
Robert

[Carsten]

Hallo zusammen,

das wird wohl die einzige Möglichkeit sein.

Das Problem an so einem "weiterleiter" *g* ist, das du jedesmal diese Seite aufmachen müsstest, welche aber nicht immer die selbe Seite laden soll, nehme ich an. Deshalb müsstest du noch das Ziel im url mitgeben und eine Logik einbauen, die das ausließt.

Und wenn das dann soweit ist, wird die Nachricht vermutlich trozdem verschwinden, bevor die neue Seite fertig geladen ist.

Gruß
Carsten

[Simone]

Hi

<html>
<head>
<title>DHTMLCentral.com - Free Dynamic HTML Scripts - LoadingBar Demo</title>
<meta name="Author" content="Thomas Brattli ([e-mail])">
<META NAME="Generator" CONTENT="Designer:Thomas Brattli (www.bratta.com)">
<meta name="KeyWords" content="DHTML, HTML, Dynamic HTML, Javascript, Cascading Style Sheets, Cross-browser, Cross browser, Javascripts, DOM, Scripts, Free Scripts,loading,bar,loadingbar,images,load,hide,wait,">
<meta name="Description" content="Dynamic HTML Central - The ultimate place to find DHTML scripts, demos, tutorials and help.">

<style type="text/css">
#divLoadCont {position:absolute; z-index:500; left:0px; top:0px; width:100%; height:98%; clip:rect(0px 100% 100% 0px); background-color:#ffffff; layer-background-color:#ffffff;}
#divLoad1    {position:absolute; layer-background-color:silver; background-color:silver;}
#divLoad2    {position:absolute; left:0px; top:0px; layer-background-color:navy; background-color:navy;}
#divLoadText {position:absolute; background-color:transparent; font-family:arial,helvetica,sans-serif; color:navy; font-size:14px;}
</style>

<script language="JavaScript" type="text/javascript">
/**********************************************************************************
LoadingBar
*   Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
*   This script was released at DHTMLCentral.com
*   Visit for more great scripts!
*   This may be used and changed freely as long as this msg is intact!
*   We will also appreciate any links you could give us.
*
*   Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
*********************************************************************************/

function lib_bwcheck(){ //Browsercheck (needed)
 this.ver=navigator.appVersion
 this.agent=navigator.userAgent
 this.dom=document.getElementById?1:0
 this.opera5=this.agent.indexOf("Opera 5")>-1
 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
 this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
 this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
 this.ie=this.ie4||this.ie5||this.ie6
 this.mac=this.agent.indexOf("Mac")>-1
 this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
 this.ns4=(document.layers && !this.dom)?1:0;
 this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
 return this
}
var bw=new lib_bwcheck()

/*VARIABLES TO SET START: */
numImages = 10    //How many images you have in your page
loaderWidth = 400 //The width of the loadbar
/*
All other settings, like colors fonts and stuff like that you
have to change in the STYLE section.

IMPORTANT:
To make this actually show the correct results
you have to place THIS code in all images:
onload="loadIt(1)"

Which means that your image should look
something like this:
<img src="whatever.gif" width="10" border="0" height="10" onload="loadIt(1)">

VARIABLES TO SET END: */

// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";

currentImg = 0
//Document size object ********
function lib_doc_size(){
  this.x=0;this.x2=bw.ie && document.body.offsetWidth-20||innerWidth||0;
  this.y=0;this.y2=bw.ie && document.body.offsetHeight-5||innerHeight||0;
  if(!this.x2||!this.y2) return message('Document has no width or height')
  this.x50=this.x2/2;this.y50=this.y2/2;
  return this;
}

//Lib objects  ********************
function lib_obj(obj,nest){
  nest=(!nest) ? "":'document.'+nest+'.'
  this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;
  this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt;
  this.ref=this.css
  this.w=this.evnt.offsetWidth||this.css.clip.width||
    this.ref.width||this.css.pixelWidth||0;
  return this
}
//Moving object to **************
lib_obj.prototype.moveIt = function(x,y){
  this.x=x; this.y=y; this.css.left=x+px; this.css.top=y+px;
}
//Clipping object to ******
lib_obj.prototype.clipTo = function(t,r,b,l,setwidth){
  this.ct=t; this.cr=r; this.cb=b; this.cl=l
  if(bw.ns4){
    this.css.clip.top=t;this.css.clip.right=r
    this.css.clip.bottom=b;this.css.clip.left=l
  }else{
    if(t<0)t=0;if(r<0)r=0;if(b<0)b=0;if(b<0)b=0
    this.css.clip="rect("+t+"px "+r+"px "+b+"px "+l+"px)";
    if (setwidth){
  this.css.pixelWidth = r;
  this.css.pixelHeight = b;
  this.css.width = r+px;
  this.css.height = b+px;
 }
  }
}
var oLoad2
function startLoading(){
  page = new lib_doc_size()
  oLoadCont = new lib_obj('divLoadCont')
  oLoad = new lib_obj('divLoad1','divLoadCont')
  oLoad2 = new lib_obj('divLoad2','divLoadCont.document.divLoad1')
  oLoadText = new lib_obj('divLoadText','divLoadCont.document.divLoad1')
  oLoad.moveIt(page.x50-loaderWidth/2,page.y50-20)
  oLoadText.moveIt(loaderWidth/2 - oLoadText.w/2,10)
  oLoad.clipTo(0,loaderWidth,40,0,1)
  oLoad2.per = loaderWidth/numImages
}
function loadIt(ok){
  currentImg ++
  if (oLoad2) oLoad2.clipTo(0,oLoad2.per*currentImg,40,0,1)
  if (!ok){
    oLoadCont.css.visibility = "hidden"
    oLoadCont = null;
 oLoad1 = null;
 oLoad2 = null;
  }
}

//DISPLAY FUNCTION - DELETE START -------- DELETE THIS *************
//LEAVE THIS FUNCTION WHILE TESTING. DELETE WHEN READY
function loadIt_display(ok){
  currentImg ++
  if (oLoad2) oLoad2.clipTo(0,oLoad2.per*currentImg,40,0,1)
  if (currentImg<=numImages) setTimeout("loadIt_display(1)",200)
  else{
    oLoadCont.css.visibility = "hidden"
  }
}
//DISPLAY FUNCTION - DELETE END *************************************
</script>
</head>

<!-- END DELETE -->

<!-- ALWAYS HAVE THIS RIGHT AFTER THE BODY START TAG -->
<div id="divLoadCont">
  <div id="divLoad1">
    <div id="divLoad2"></div><br>
    <div id="divLoadText">Loading...</div>
  </div>
</div>

<script>

startLoading()
//onload=loadIt; //- LEAVE THIS LINE WHILE TESTING. UNCOMMENT WHEN READY
loadIt_display(1) //LEAVE THIS LINE WHILE TESTING. DELETE WHEN READY
</script>

</body>
</html>

Simone