nicht angemeldet
JavaScript - Ladestatus && Frage Forum allegmein
0 0 quellcode
0
0
JavaScript - Ladestatus && Frage Forum allegmein
Liebe Forumsteilnehmer
Vielleicht kann mir ja jemand helfen. Ich suche nach einer Moeglichkeit den Ladestatus eines Dokuments abzufragen und entsprechend weiter zu arbeiten. Ich erinnere mich dunkel mal etwas aehnliches gesehen zu haben und wollte es nun selbst versuchen:
In der Objektreferenz konnte ich leider nichts finden. Entweder ich hab es uebersehen, oder es gibt nichts. Dann hab ich alles Moegliche versucht die Statusbar auszulesen - leider auch ohne Erfolg. :-/
Hat jemand vielleicht irgendeinen Tip oder eine Idee - Christine, Stefan oder irgendwer anders? Vielen Danke schonmal.
Kirstin Henningsen
P.S. Frage zum Forum: Kann man das mit dem Eingabeformular nicht anders loesen. Der Server ist oft recht langsam und und eher man die ganze Seite geladen hat vergehen Stunden :-)
-
HI !
Hat jemand vielleicht irgendeinen Tip oder eine Idee - Christine, Stefan oder irgendwer anders? Vielen Danke schonmal.
ich habe keine idee, aber einen link:
1. http://webfx.eae.net
2. DHTML Samples
3. -> Status Bardieses beispiel funzt leider nur im IE4, aber vielleicht kann man es auch für ns umstellen ???
Fabian
-
so, jetzt für alle die die WebFX seite ned laden können, weil sie keinen IE4 haben der sourcecode:
<schnipp>
*****************************************<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Status Bar (WebFX)</title>
<link rel="STYLESHEET" type="text/css" href="../../webfx.css">
<script type="text/javascript">
<!--function setSB(v, el) {
filterEl = el.children[0];
valueEl = el.children[1];if (filterEl.style.pixelWidth > 0) {var filterBackup = filterEl.style.filter;
filterEl.style.filter = "";
filterEl.style.filter = filterBackup;
}filterEl.style.width = v + "%"; valueEl.innerText = v + "%";}
window.onload = new Function("setSB(100,sb)")
//-->
</script></head>
<body><script type="text/javascript" src="/includeHeading.js"></script>
<script type="text/javascript">
includeHeading("Status Bar", "statusbar.zip");
</script><div style="text-align: center; width: 500;">
<!-- Status Bar Starts -->
<div id="sb" style="border: 2 inset white; width: 200px; height: 20px; background: white; text-align: left;">
<div style="position: absolute; width: 0%; height: 16px; filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);">
<div style="width: 100%; height: 100%; background: highlight; font-size: 1;"></div>
</div>
<div style="position: absolute; width: 100%; text-align: center; font-family: arial; font-size: 12px; color: black;">0%</div>
</div>
<!-- Status Bar Ends -->
</div><script>setSB(50,sb)</script> <!-- The head is pretty large -->
<p>Status bars are really easy to do in DHTML. The creation of your own status bar is really easy and
the update of the value is also easy. There is only one real problem: Coordinating the status bar
so it represent some logical status.</p><h2>Creation</h2>
<p>The only thing that is needed for a statusbar is some element that can be changed in a logical
way to represent the progress. The easiest is a HR or a DIV with a background color. I choose to do
a little more complex structure using nested DIVs to have a gradient fill of the status. I also
added another DIV that shows the numerical percentage value. Below a show the most simple and my
version of a status bar.</p><pre><!-- Simple Status Bar -->
<hr id="simpleStatBar" style="width: 10%;"><script>setSB(60,sb)</script>
<!-- My Status Bar -->
<div id="sb" style="border: 2 inset white; width: 200px; height: 20px; background: white; text-align: left;">
<div style="position: absolute; width: 0%; height: 16px;
filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);">
<div style="width: 100%; height: 100%; background: highlight; font-size: 1;"></div>
</div>
<div style="position: absolute; width: 100%; text-align: center; font-family: arial; font-size: 12px;">
0%</div>
</div>
</pre><h2>Updating</h2>
<h3>By loaded text</h3>
<script>setSB(70,sb)</script>
<p>This is maybe the easiest way to update the statusbar. In the html file you add SCRIPT tags at
even intervals that updates the status bar.</p><pre><!-- Simple Version -->
<script>simpleStatBar.style.width = "20%"</script>
<!-- My version -->
<script>setSB(20,sb)</script>
</pre><h3>By loaded images</h3>
<p>All images expose the property <code>readyState</code>. Once the images is fully loaded the
<code>readeState</code> becomes <strong>complete</strong>. Every change in <code>readyState</code>
fires the event <code>onreadystatechange</code> but this event doesn't bubble so you'll have to
catch the event on the object. There are basically two solutions to this. The first is just to check
all images using <code>document.images</code> at an even interval or you could add the event
handlers to all images once. You could also add an array with information about the size of each
image.</p>
<script>setSB(80,sb)</script>
<h3>Other elements</h3><p>Basically all element that loads an external file has the <code>readyState</code> attribute.
These are the elements that expose it: IMG, LINK, OBJECT, SCRIPT, STYLE and the document element.
You can also try this property on other frames by checking the document inside the frmae.</p><h2>Finishing</h2>
<p>The status bar should (probably) say 100% when the page has finished loaded. This can be acheived
by setting the status bar to 100% when window.onload fires.</p><pre>window.onload = new Function("setSB(100,sb)")</pre>
<h2>Getting file size</h2>
<p>I don't know any way to find the file size using client side scripts but using server side
script (such as ASP, SSI, PHP) you could insert the file size inside the html as a string that
can then be accessed by the client sides script.</p><h2>Final Words</h2>
<p>Status bar are nice but there isn't any really an easy way to create a general method. You
always need to add some (but easy) code to your html...</p><p class="author">Author: Erik Arvidsson</p>
<script>setSB(90,sb)</script>
<!-- Footer starts here -->
<style type="text/css">
<!--#ftrBox {position: relative; top: 10; left: 10;
width: 420; height: 80;
border: 10 solid #eeeeee;}
#ftrCircle1 {position: relative; top: -140; left: 375; width: 100; cursor: hand;
font-family: webdings; font-size: 100;
color: #eeeeee;}
#ftrCircle2 {position: relative; top: -230; left: 385; width: 80; cursor: hand;
font-family: webdings; font-size: 80;
color: white;}#ftrImg1 {position: relative; top: -50; left: 25; width: 100; height: 40;
color: black; font-size: 40; font-family: arial black; font-style: italic;
border: 0 solid black;
filter: gray(), alpha(opacity=20)}
#ftrText {position: relative; top: -90; left: 135; width: 300; height: 50;
color: #bbbbbb; font-size: 12px; font-family: verdana; font-weight: normal;}
#ftrText a {color: #aaaaaa; font-weight: bold; font-size: 12px; text-decoration: none;}
#ftrText a:hover {color: navy; font-weight: bold; text-decoration: none;}#ftrBack {position: relative; top: -285; left: 395; width: 60; height: 30;
color: #dddddd; font-size: 20; cursor: hand;
font-family: arial black; font-weight: normal;}
-->
</style>
<script>
<!--function high() {
// ftrCircle1.style.zIndex = 99;
// ftrCircle2.style.zIndex = 99;
// ftrBack.style.zIndex = 99;
ftrCircle1.style.color ="navy";
ftrBack.style.color ="navy";
window.status = "This takes you to the main page!";
}function low() {
toEl = window.event.toElement;
if (toEl == null || toEl.id != "ftrCircle1" && toEl.id != "ftrCircle2" && toEl.id != "ftrBack") {
ftrCircle1.style.color ="#eeeeee";
ftrBack.style.color ="#dddddd";
window.status = "";
}
}//-->
</script><div style="text-align: center; margin: 0; margin-top: 50px; width: 500px;">
<div style="text-align: left; width: 490; height: 140; overflow: hidden;">
<div id="ftrBox"></div><a href="http://webfx.eae.net" target="_top"><img id="ftrImg1" src="http://webfx.eae.net/images/crfoot.gif" width=100 height=40 border=0 alt="Back to Main page"
onmouseover="this.style.filter=''"
onmouseout="this.style.filter='gray() alpha(opacity=20)'"</a>
<div id="ftrText">
Page designed and maintained by <a href="mailto:erik@eae.net">Erik Arvidsson</a> and <a href="mailto:eae@eae.net" target="_top">Emil A. Eklund</a>
</div><div id="ftrCircle1" onmouseover="high()" onmouseout="low()" onclick="window.open('http://webfx.eae.net','_top')">n</div>
<div id="ftrCircle2" onmouseover="high()" onmouseout="low()" onclick="window.open('http://webfx.eae.net','_top')">n</div><div id="ftrBack"
onmouseover="high()" onmouseout="low()" onclick="window.open('http://webfx.eae.net','_top')"Back</div>
</div>
</div><!-- Footer ends here -->
</body>
</html>*****************************************
</schnipp>Fabian
-
1. http://webfx.eae.net
2. DHTML Samples
3. -> Status Bardieses beispiel funzt leider nur im IE4, aber vielleicht kann man es auch für ns umstellen ???
Danke Fabian . Ich hab es mir angesehen. Leider scheint das nicht zu taugen fuer Netscape und ist somit nicht akzeptabel. Man kann es auch nicht anpassen. Ausserdem war es nicht sehr uebersichtilich programmiert. :-/
Vielen Dank, Kirstin Henningsen
-
HI
Danke Fabian . Ich hab es mir angesehen. Leider scheint das nicht zu taugen fuer Netscape und ist somit nicht akzeptabel.
hab ich mir fast gedacht. der autor von webfx macht alles für den ie weil er meint der ns ist in dhtml ned so gut (da muss ich ihm voll und ganz zustimmen).
Man kann es auch nicht anpassen. Ausserdem war es nicht sehr uebersichtilich programmiert. :-/
ich werde den autor mal bitte nes anzupassen, wenn er aus dem urlaub wieder da ist.
Fabian
-
hab ich mir fast gedacht. der autor von webfx macht alles für den ie weil er meint der ns ist in dhtml ned so gut (da muss ich ihm voll und ganz zustimmen).
Naja, man darf nicht vergessen, dass der NS4 in seiner Beta schon seit zwei Jahren auf dem Markt ist - weit vor MSIE4. Das konzept ist natuerlich
von MS ausgereifter. Das ist aber kein Grund nur fuer 40% der Surfer zu programmieren. Mit dem argument koennte man noch ganz andere Sachen nutzen - es gibt genug Plugins. Eine sehr schaedliche Einstellung fuer WWW :-/Kirstin Henningsen
-
-
-
-
Hallo Kirstin
Ich suche nach einer Moeglichkeit den Ladestatus eines Dokuments abzufragen und entsprechend weiter zu arbeiten. Ich erinnere mich dunkel mal etwas aehnliches gesehen zu haben
Ich kenne nur das hier:
<html><head>
<script language="JavaScript">
function TuWas() {
/* wird nur ausgefuehrt, wenn Datei ganz geladen ist */
}
</script>
</head>
<body onLoad="TuWas()">
</body>
</html>P.S. Frage zum Forum: Kann man das mit dem Eingabeformular nicht anders loesen. Der Server ist oft recht langsam und und eher man die ganze Seite geladen hat vergehen Stunden :-)
Der Server gilt allgemein als ziemlich schnell. Vielleicht ist's doch eher der eigene Zugangsprovider?<g>
viele Gruesse
Stefan Muenz-
Hallo Stefan
Ich kenne nur das hier:
<html><head>
<script language="JavaScript">
function TuWas() {
/* wird nur ausgefuehrt, wenn Datei ganz geladen ist */
}
</script>
</head>
<body onLoad="TuWas()">
</body>
</html>Ja das kenn ich auch <g> Es gibt aber noch andere Loesungen - ich finde sie nur nicht mehr im
Netz :-(Der Server gilt allgemein als ziemlich schnell. Vielleicht ist's doch eher der eigene Zugangsprovider?<g>
Nein - tagsueber kommt es schonmal vor, dass der Server von Teamone recht lahm ist. Am abend ist es besser. Aber ich ewrd mir einfach das Formular kopieren und meine neuen Forumseintraege dann von der Festplatte abschicken <g>
Vielen Dank, Kirstin Henningsen
-
Hallo Kirstin,
Stefan schrieb:
Ich kenne nur das hier:
...
<body onLoad="TuWas()">
Ja das kenn ich auch <g> Es gibt aber noch andere Loesungen - ich finde sie nur nicht mehr im
Netz :-(Was denn fuer andere Loesungen?
Das Ende des Ladevorgangs ist genau der Moment, in dem "BODY onload" eintritt.
Dafuer gibt es keine andere Loesung.Meinst Du vielleicht was anders?
Du sprichst vom Ladestatus. Was verstehst Du darunter? Was willst Du tun?Die anderen Antworten hier im Thread drehen sich alle um das Beispiel aus "http://webfx.eae.net"
Das scheint mir so eine fortschreitende Statusanzeige zu sein (die Seite bringt leider auch mit MSIE4 Fehler, deswegen habe ich nicht so genau reingeguckt).Meinst Du sowas?
Das waere ja dann was anderes als das, was Stefan rausgelesen hat.Nein - tagsueber kommt es schonmal vor, dass der Server von Teamone recht lahm ist. Am abend ist es besser. Aber ich ewrd mir einfach das Formular kopieren und meine neuen Forumseintraege dann von der Festplatte abschicken <g>
Tip von mir:
Uebersichtsseite und alle interessanten Beitraege in separaten Fenstern offen lassen, Verbindung kappen, in Ruhe schreiben (egal ob neu oder Antwort, eagl wie viele), Verbindung wieder herstellen, abschicken.Christine
-
Die anderen Antworten hier im Thread drehen sich alle um das Beispiel aus "http://webfx.eae.net"
Das scheint mir so eine fortschreitende Statusanzeige zu sein (die Seite bringt leider auch mit MSIE4 Fehler, deswegen habe ich nicht so genau reingeguckt).Meinst Du sowas?
Ja Cristine, genau sowas meine ich. Ich hab versucht die Statusleiset auszulesen. Allerdings ohne Erfolg. Ich will eine DHTML Seite schreiben, wo es eine ganze Weile dauert, bis Grafiken und die Datei geladen ist .. deswegen will ich den Ladestautus .. vielleicht in Prozent in einem Layer anzeigen, waehrend die Seite fertig geladen wird. Ich hab so etwas vor einer weile mal im Netz gesehen und es hat auch sehr gut funktioniert, aber leider weiss ich die url nicht mehr.
Na wahrscheinlich bleibt der Hinweis auf den Ladevorgang ohne Statusanzeige :-)Vielen Dank, Kirstin Henningsen
-
Hallo,
Ja Cristine, genau sowas meine ich. Ich hab versucht die Statusleiset auszulesen. Allerdings ohne Erfolg. Ich will eine DHTML Seite schreiben, wo es eine ganze Weile dauert, bis Grafiken und die Datei geladen ist .. deswegen will ich den Ladestautus .. vielleicht in Prozent in einem Layer anzeigen, waehrend die Seite fertig geladen wird. Ich hab so etwas vor einer weile mal im Netz gesehen und es hat auch sehr gut funktioniert, aber leider weiss ich die url nicht mehr.
Du kannst ja versuchen, in den Grafik-Tags ein onLoad auszuführen, welches eine Variable hochzählt. Aus dieser und der Zahl der Grafiken berechnest Du dann den Prozentwert. Ist zwar nicht so 100%ig richtig, kann aber als Hinweis durchaus dienen!
Cheatah
-
HI !
Du kannst ja versuchen, in den Grafik-Tags ein onLoad auszuführen, welches eine Variable hochzählt. Aus dieser und der Zahl der Grafiken berechnest Du dann den Prozentwert. Ist zwar nicht so 100%ig richtig, kann aber als Hinweis durchaus dienen!
jep, das ist ne gute idee ! dann kannst du sowas machen:
Grafik 1 von 10 geladen
Grafik 2 von 10 geladen
Grafik 3 von 10 geladen
...
..
.oder
grafik1: OK
grafik2:
grafik3: OKund so weiter
-
Du kannst ja versuchen, in den Grafik-Tags ein onLoad auszuführen, welches eine Variable hochzählt. Aus dieser und der Zahl der Grafiken berechnest Du dann den Prozentwert. Ist zwar nicht so 100%ig richtig, kann aber als Hinweis durchaus dienen!
Hi Cheatah
Vielen Dank - das ist tatsaechlich eine Sache, die ich nich nicht probiert habe - werde es aber mal versuchen. Ich geb dann bescheid
Vielen Dank, Kirstin henningsen
-
-
-
-
-